[Resolved] Showing posts in a masonry style grid, with no gaps

[Author]

Posts

[nickT-2]

Hi,
I'm showing a grid of my woocommerce products. At the moment some of the product titles are longer than others which means not all product items in the grid are the same height. At the moment this is causing mis-alignment and therefore big gaps until the next row.

You can see this here: hidden link ... please replace (dot) with a . for the url to work.

Is there a way to set the grid in the View to be like a masonry style grid? I'm assuming this is a more structural change to the way I've designed the view rather than a css fix? Please find attached a screenshot of the Loop Editor in my view to give you an idea of how it's been set up.

Thanks
Nick

[Minesh]

Hello. Thank you for contacting the Toolset support.

I'm not sure what bootstrap version you are using, so you should check the following links that may help you:
- https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
- https://stackoverflow.com/questions/46611092/equal-height-of-columns-in-bootstrap-4

Regarding masonry style grid, its not supported with classic views but you can create such view visually using Block. Please check the following Doc and review the video at top of the following doc:
- https://toolset.com/lesson-placement/lesson-placements-1621261-1622283/

[nickT-2]

Hi Minesh,

Thanks for your message. I was on v3 bootstrap but now changed to v4, thanks.

I've tried creating a view but don't seem to get that Masonry option. I'm using Blocks and have Views plugin deactivated.

Is it only possible to get to the Masonry option in the Gutenberg page editor? I use WP Bakery as my page builder so I'm struggling to see what code is used to do the Masonry layout. If I find it somewhere is it possible to copy and paste this code, and modify if needed, in the content template?

Thanks
Nick

[Minesh]

I've tried creating a view but don't seem to get that Masonry option. I'm using Blocks and have Views plugin deactivated.
==>
With legacy (classic) view mode that is currently used by you, you will not have that option. You will require to switch to Blocks.

To switch to blocks, if you are using views plugin, you should navigate to:
-=> Toolset => Settings => General Tab => select the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build"

Now refresh the page and you will now be able to create view in Classic Mode from: Toolset -> Views
And using Block Mode as demonstrated in the video:
- https://toolset.com/lesson-placement/lesson-placements-1621261-1622283/

But I dont think you will require to recreate the view as you can adjust your current view with some class to autofit the grid columns to equal heights. If you do not know how to do it you may consult Bootstrap expert.