Masonry Query Loop

Agent8
June 15, 2026 at 4:10 am

Hi,

I’ve been trying to apply a masonry effect to a query loop block in order to display art at the correct aspect ratio without massive gaps vertically. I’ve tried following this thread but am not getting a good result:

https://generate.support/topic/create-masonry-grid-with-query-loop/

I have tried adding bottom margin to the loop item but this creates the same problem as not having masonry. E.G. Margin fixes the first item but then all the others have a massive white margin at the bottom.

Can you point me in the right direction?

Thanks,
Nick.
George
June 15, 2026 at 5:29 am
Hello,

Please remove any existing JS, set the query looper grid to 1 column, and give it a class of css-masonry.

Then, use this CSS:
```
.css-masonry {
    display: block !important;
    column-count: 3;
    column-width: 250px;
    column-gap: 40px;
}
.gb-loop-item {
    break-inside: avoid;
    margin-bottom: 40px
}
```
This sets a 3 column grid, but it will collapse to 2 or 1 when there isn’t space for the 250px column-width.
Agent8
June 15, 2026 at 5:47 am

Thats great. Thanks George. Fixed.
George
June 15, 2026 at 6:01 am

Glad to know, you are welcome!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.