Masonry for Query Loop in Bricks

Updated on 26 Jun 2022

This Pro tutorial provides the steps to apply a responsive masonry layout for the posts output using Query Loop feature of Bricks.

Note that there is a built-in option for displaying posts in masonry layout in the Posts element (which we believe could have been implemented better. At the moment, there will be unwanted space for the items in the right-most column).

This tutorial is for those who want full control of the loop via Query Loop and masonry implemented without the above-mentioned issue.

Step 1

Edit your Page/Template with Bricks.

Add a Section.

Add a Container inside the Section's Container and change its name to say, "Masonry Grid". This is going to be the parent for each repeating item (post). Assign this a class of masonry-grid.

Add a Container inside. Toggle "Use query loop" to on. Configure the query as needed. Rename this to say, "Article".

HTML Tag: article

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

  • Doug Rider

    Thanks for this Sridhar. I was able to set this up using 48px for gaps/gutter.

    Is there a way to specify spacing with percentages? I’m currently using 2 columns (min-width: 768px), each column would be 48%. With JS, how do you represent the gutter with 4%?

    Thanks, Doug.

  • Francois Gonin

    …btw lazy loading of Bricks is disabled

  • Francois Gonin

    Thank you Sridhar for this. Basicly it works, but very weird behaviour when using post navigation or showing to much posts. Must be a lazy load issue (no caching plugins activated). Do you have maybe any solution to this?
    Thanks, Francois

Leave your comment