Custom Query loop make it mansory?

How To
1

Hi!

I made a list cards with custom query loop. These are different long and different height.

How can i set it mansory?

image
image1613Ă—1742 241 KB

2

I think there’s no native way currently. But this works like a charm (apart from potential conflicts with Bricks lazy loading). Unfortunately, it’s a paid tutorial.

3

To make your custom query loop masonry, try this:

Create your section and container.

Set the container as:

  • Display: GRID
  • Grid template columns: repeat(auto-fill, minmax(400px, 1fr)) (or whatever you want).

Add a DIV inside the container, before the loop, and add to it the “masonry-container” class.

Add the loop inside the DIV, and add the “masonry-item” class and set the display to “inline-block” to the loop.

Add the CSS:

.masonry-container {
  -moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 70px;
-webkit-column-gap: 70px;
column-gap: 70px;
}
.masonry-item {
  break-inside:avoid;
}

:

I hope that will help. :slight_smile:

5 Likes
4

Thanks, I will try it! :slight_smile:

5

Hi!

Works perfect but anyway post direction was in a row and not in a column like now?

7

Same for me, any solution ?

8

This was amazing, thank you!

9

This was SUCH a simple, great way to achieve a masonry query loop - THANK YOU!!