Masonry for Query Loop in Bricks

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

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get full access to all 220+ Bricks tutorials with BricksLabs Pro

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?

    • A

      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’ )” ?

  • 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