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
13 comments
Brian Lovelace
One last question. Any way for this to play nice with the Infinite Scroll feature of bricks? or would you recommend instead following your Isotope.js tutorial?
Brian Lovelace
Hey Sridhar! Thanks so much for this. If we’re using this on *multiple* post types, say search results AND a bricks template // archive page, how would I go about that in the php script?
Sridhar Katakam
if ( is_search() || is_post_type_archive( ‘event’ ) ) {
where event is the name of the CPT.
Brian Lovelace
We gonna see if ChatGPT is right 😆
if (is_page(“masonry-query-loop”) && is_search(“masonry-query-loop”)) {
wp_enqueue_script(
“masonry-init”,
get_stylesheet_directory_uri() . “/assets/js/masonry-init.js”,
[“masonry”],
“1.0.0”,
true
);
}
Antoine Lippens
Hi Sridhar, what if trying to use this on Search Result template ? What should be used when replacing “is_page( ‘masonry-query-loop’ )” ?
Sridhar Katakam
Hi. Use is_search()
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
Francois Gonin
…it’s really weird. The same page get’s rendered differently every time I reload the page. I would say 3 of 4 times the items are not layed out properly. Would be great to have a solution. see example here https://temp1.goninski.ch/catalog/stilleben
Sridhar Katakam
I’ve updated the tutorial, code in masonry-init.js and that should fix the issue.
Francois Gonin
wow, it works now ! thank you Sridhar.
Francois Gonin
…btw lazy loading of Bricks is disabled