Masonry Grid is broken on live site, but works great in block editor
-
Hi all. Having trouble getting the masonry grid to show properly on my site. The basic layout is two columns, with the header/menu in the left column and the grid on the right, for a simple illustration portfolio.
Here’s a screenshot of the live site:
And of the block editor:

I’ve tried inspected the live page to see if I can figure out what’s wrong but to no avail. Any help would be greatly appreciated. Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hello there,
Thank you for bringing this to our attention.
I’ve reviewed the site: catsandmaidens.art and noticed the same issue on my end.
After looking into it further, I found that it’s a known bug. You can check the details here.
As a workaround, you can add content to a page or post instead of using the template. We also have an official block called Tiled Gallery that has a similar effect. I recommend using this built-in block instead of Masonry, as it’s our latest option.
Let me know if you have any other questions.
-
Updated the site for now to use the standard Gallery layout with 2 columns and “Crop images to fit” turned off. That shows the two columns just fine on the live site, but with annoying gaps. Would really like to figure out how to use the Masonry layout without it breaking.
-
For the gaps, have you checked the style settings for your gallery? Try checking on Block Spacing and explicitly setting it to zero, or whatever size you like. There will be some gaps by nature of your images not being cropped to fit, but it may help somewhat.
- The topic ‘Masonry Grid is broken on live site, but works great in block editor’ is closed to new replies.