Updated on 10 Mar 2023
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 Block inside. Toggle "Use query loop" to on. Configure the query as needed. Rename this to say, "Article".
HTML Tag: article
