Masonry Query Loop

  • gandalf12
    July 27, 2026 at 12:26 pm

    Hi,

    I am trying to create a masonry style section for 6 posts on my home page, the layout is shown on image in this link:
    Masonry Layout

    I have tried various solutions by attempting to add a bento-grid-loop global style but to no avail.

    Can you advise on the layout, bearing in mind that images used could be of various sizes.

    Thanks

  • Ying
    July 27, 2026 at 1:12 pm

    Hi there,

    You can create this layout using a structure like this:

    - Grid with 2 columns
 -- Grid with 2 rows
   --- Query with 2 posts
   --- Query with 1 post
 -- Grid with 2 rows
   --- Query with 1 post
   --- Query with 2 posts

    You can also copy the code below and paste it to your page to have a quick start.

    <!-- wp:generateblocks/element {"uniqueId":"a8024905","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(2, minmax(0, 1fr))","columnGap":"20px","rowGap":"20px","@media (max-width:767px)":{"gridTemplateColumns":"1fr"}},"css":".gb-element-a8024905{column-gap:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}@media (max-width:767px){.gb-element-a8024905{grid-template-columns:1fr}}"} -->
<div class="gb-element-a8024905"><!-- wp:generateblocks/element {"uniqueId":"732f0436","tagName":"div","styles":{"display":"grid","rowGap":"20px","gridTemplateRows":"1fr 2fr"},"css":".gb-element-732f0436{display:grid;grid-template-rows:1fr 2fr;row-gap:20px}"} -->
<div class="gb-element-732f0436"><!-- wp:generateblocks/query {"uniqueId":"7031b65f","tagName":"div","query":{"post_type":["post"],"posts_per_page":"2"}} -->
<div><!-- wp:generateblocks/looper {"uniqueId":"713c2fdf","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(2, minmax(0, 1fr))","columnGap":"20px","rowGap":"20px","height":"100%","@media (max-width:767px)":{"gridTemplateColumns":"1fr"}},"css":".gb-looper-713c2fdf{column-gap:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:100%;row-gap:20px}@media (max-width:767px){.gb-looper-713c2fdf{grid-template-columns:1fr}}"} -->
<div class="gb-looper-713c2fdf"><!-- wp:generateblocks/loop-item {"uniqueId":"a91ac292","tagName":"div","styles":{"backgroundColor":"#fafafa","paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","backgroundImage":"var(\u002d\u002dinline-bg-image)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","minHeight":"100%"},"css":".gb-loop-item-a91ac292{background-blend-mode:normal;background-color:#fafafa;background-image:var(\u002d\u002dinline-bg-image);background-position:center;background-repeat:no-repeat;background-size:cover;min-height:100%;padding:20px}","htmlAttributes":{"style":"\u002d\u002dinline-bg-image: url({{featured_image required:false|key:url}})"}} -->
<div class="gb-loop-item gb-loop-item-a91ac292" style="--inline-bg-image: url({{featured_image required:false|key:url}})"><!-- wp:generateblocks/text {"uniqueId":"c3882676","tagName":"h2","styles":{"fontSize":"30px","marginBottom":"5px"},"css":".gb-text-c3882676{font-size:30px;margin-bottom:5px}"} -->
<h2 class="gb-text gb-text-c3882676">{{post_title link:post}}</h2>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"be1d21ac","tagName":"p","styles":{"marginBottom":"30px","fontSize":"14px"},"css":".gb-text-be1d21ac{font-size:14px;margin-bottom:30px}"} -->
<p class="gb-text gb-text-be1d21ac">{{post_date}}</p>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/loop-item --></div>
<!-- /wp:generateblocks/looper -->

<!-- wp:generateblocks/query-no-results -->
<!-- wp:generateblocks/text {"uniqueId":"a5d93cf9","tagName":"p"} -->
<p class="gb-text">No results found.</p>
<!-- /wp:generateblocks/text -->
<!-- /wp:generateblocks/query-no-results --></div>
<!-- /wp:generateblocks/query -->

<!-- wp:generateblocks/query {"uniqueId":"c83f72c1","tagName":"div","styles":{"flexGrow":"1","flexBasis":"66.6%"},"css":".gb-query-c83f72c1{flex-basis:66.6%;flex-grow:1}","query":{"post_type":["post"],"posts_per_page":"1","offset":"2"}} -->
<div class="gb-query-c83f72c1"><!-- wp:generateblocks/looper {"uniqueId":"005742b2","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"1fr","columnGap":"20px","rowGap":"20px","@media (max-width:767px)":{"gridTemplateColumns":"1fr"},"height":"100%"},"css":".gb-looper-005742b2{column-gap:20px;display:grid;grid-template-columns:1fr;height:100%;row-gap:20px}@media (max-width:767px){.gb-looper-005742b2{grid-template-columns:1fr}}"} -->
<div class="gb-looper-005742b2"><!-- wp:generateblocks/loop-item {"uniqueId":"9e9dc6b2","tagName":"div","styles":{"backgroundColor":"#fafafa","paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","backgroundImage":"var(\u002d\u002dinline-bg-image)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","minHeight":"100%"},"css":".gb-loop-item-9e9dc6b2{background-blend-mode:normal;background-color:#fafafa;background-image:var(\u002d\u002dinline-bg-image);background-position:center;background-repeat:no-repeat;background-size:cover;min-height:100%;padding:20px}","htmlAttributes":{"style":"\u002d\u002dinline-bg-image: url({{featured_image required:false|key:url}})"}} -->
<div class="gb-loop-item gb-loop-item-9e9dc6b2" style="--inline-bg-image: url({{featured_image required:false|key:url}})"><!-- wp:generateblocks/text {"uniqueId":"28221526","tagName":"h2","styles":{"fontSize":"30px","marginBottom":"5px"},"css":".gb-text-28221526{font-size:30px;margin-bottom:5px}"} -->
<h2 class="gb-text gb-text-28221526">{{post_title link:post}}</h2>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"8f250afa","tagName":"p","styles":{"marginBottom":"30px","fontSize":"14px"},"css":".gb-text-8f250afa{font-size:14px;margin-bottom:30px}"} -->
<p class="gb-text gb-text-8f250afa">{{post_date}}</p>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/loop-item --></div>
<!-- /wp:generateblocks/looper -->

<!-- wp:generateblocks/query-no-results -->
<!-- wp:generateblocks/text {"uniqueId":"5d5dc209","tagName":"p"} -->
<p class="gb-text">No results found.</p>
<!-- /wp:generateblocks/text -->
<!-- /wp:generateblocks/query-no-results --></div>
<!-- /wp:generateblocks/query --></div>
<!-- /wp:generateblocks/element -->

<!-- wp:generateblocks/element {"uniqueId":"e91795ef","tagName":"div","styles":{"display":"grid","rowGap":"20px","gridTemplateRows":"2fr 1fr"},"css":".gb-element-e91795ef{display:grid;grid-template-rows:2fr 1fr;row-gap:20px}"} -->
<div class="gb-element-e91795ef"><!-- wp:generateblocks/query {"uniqueId":"4f4d9be2","tagName":"div","styles":{"flexGrow":"1","flexBasis":"66.6%"},"css":".gb-query-4f4d9be2{flex-basis:66.6%;flex-grow:1}","query":{"post_type":["post"],"posts_per_page":"1","offset":"3"}} -->
<div class="gb-query-4f4d9be2"><!-- wp:generateblocks/looper {"uniqueId":"960bdc9d","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"1fr","columnGap":"20px","rowGap":"20px","@media (max-width:767px)":{"gridTemplateColumns":"1fr"},"height":"100%"},"css":".gb-looper-960bdc9d{column-gap:20px;display:grid;grid-template-columns:1fr;height:100%;row-gap:20px}@media (max-width:767px){.gb-looper-960bdc9d{grid-template-columns:1fr}}"} -->
<div class="gb-looper-960bdc9d"><!-- wp:generateblocks/loop-item {"uniqueId":"d4088151","tagName":"div","styles":{"backgroundColor":"#fafafa","paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","backgroundImage":"var(\u002d\u002dinline-bg-image)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","minHeight":"100%"},"css":".gb-loop-item-d4088151{background-blend-mode:normal;background-color:#fafafa;background-image:var(\u002d\u002dinline-bg-image);background-position:center;background-repeat:no-repeat;background-size:cover;min-height:100%;padding:20px}","htmlAttributes":{"style":"\u002d\u002dinline-bg-image: url({{featured_image required:false|key:url}})"}} -->
<div class="gb-loop-item gb-loop-item-d4088151" style="--inline-bg-image: url({{featured_image required:false|key:url}})"><!-- wp:generateblocks/text {"uniqueId":"66b049e8","tagName":"h2","styles":{"fontSize":"30px","marginBottom":"5px"},"css":".gb-text-66b049e8{font-size:30px;margin-bottom:5px}"} -->
<h2 class="gb-text gb-text-66b049e8">{{post_title link:post}}</h2>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"f17793bc","tagName":"p","styles":{"marginBottom":"30px","fontSize":"14px"},"css":".gb-text-f17793bc{font-size:14px;margin-bottom:30px}"} -->
<p class="gb-text gb-text-f17793bc">{{post_date}}</p>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/loop-item --></div>
<!-- /wp:generateblocks/looper -->

<!-- wp:generateblocks/query-no-results -->
<!-- wp:generateblocks/text {"uniqueId":"cf4f080c","tagName":"p"} -->
<p class="gb-text">No results found.</p>
<!-- /wp:generateblocks/text -->
<!-- /wp:generateblocks/query-no-results --></div>
<!-- /wp:generateblocks/query -->

<!-- wp:generateblocks/query {"uniqueId":"aa023fbb","tagName":"div","styles":{"flexBasis":"33.3%"},"css":".gb-query-aa023fbb{flex-basis:33.3%}","query":{"post_type":["post"],"posts_per_page":"2","offset":"4"}} -->
<div class="gb-query-aa023fbb"><!-- wp:generateblocks/looper {"uniqueId":"48347003","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(2, minmax(0, 1fr))","columnGap":"20px","rowGap":"20px","@media (max-width:767px)":{"gridTemplateColumns":"1fr"}},"css":".gb-looper-48347003{column-gap:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}@media (max-width:767px){.gb-looper-48347003{grid-template-columns:1fr}}"} -->
<div class="gb-looper-48347003"><!-- wp:generateblocks/loop-item {"uniqueId":"5508f1c6","tagName":"div","styles":{"backgroundColor":"#fafafa","paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","backgroundImage":"var(\u002d\u002dinline-bg-image)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","height":"100%"},"css":".gb-loop-item-5508f1c6{background-blend-mode:normal;background-color:#fafafa;background-image:var(\u002d\u002dinline-bg-image);background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;padding:20px}","htmlAttributes":{"style":"\u002d\u002dinline-bg-image: url({{featured_image required:false|key:url}})"}} -->
<div class="gb-loop-item gb-loop-item-5508f1c6" style="--inline-bg-image: url({{featured_image required:false|key:url}})"><!-- wp:generateblocks/text {"uniqueId":"21b3be6e","tagName":"h2","styles":{"fontSize":"30px","marginBottom":"5px"},"css":".gb-text-21b3be6e{font-size:30px;margin-bottom:5px}"} -->
<h2 class="gb-text gb-text-21b3be6e">{{post_title link:post}}</h2>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"6e76be2d","tagName":"p","styles":{"marginBottom":"30px","fontSize":"14px"},"css":".gb-text-6e76be2d{font-size:14px;margin-bottom:30px}"} -->
<p class="gb-text gb-text-6e76be2d">{{post_date}}</p>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/loop-item --></div>
<!-- /wp:generateblocks/looper -->

<!-- wp:generateblocks/query-no-results -->
<!-- wp:generateblocks/text {"uniqueId":"1e9c6b82","tagName":"p"} -->
<p class="gb-text">No results found.</p>
<!-- /wp:generateblocks/text -->
<!-- /wp:generateblocks/query-no-results --></div>
<!-- /wp:generateblocks/query --></div>
<!-- /wp:generateblocks/element --></div>
<!-- /wp:generateblocks/element -->
  • gandalf12
    July 27, 2026 at 11:31 pm

    Thank you Ying, that is exactly what I was looking for, I used the code by the way.

    Just a few tweaks now to round the coreners and move the text to the bottom of the images and reduce its size.

    I will get back to you if I get stuck.

    Many many thanks for such excellent support, if only all support teams were as good as Generate Support.

  • gandalf12
    July 28, 2026 at 12:33 am

    Hi Ying,

    Not sure what is going on, but after adding rounded corners to the Loop Items, changing the post title font size to 16px, the post date text colour to white and adding a darken blend mode to the background images, the images are now rectangular instead of square.

    I don’t understand why any of those changes would affect the shape of the background images.

    I was also trying to change the post title text colour to white but the typography setting did not alter it can you assist please.

    I have also been unable to move the post title and post date to the bottom of the Loop Item, can you advise on that also.

    The page address is in the private information.

    Thanks

  • George
    July 28, 2026 at 2:56 am

    Hello,

    I don’t understand why any of those changes would affect the shape of the background images.

    Since the loop items have rounded corners they would clip the images that sit underneath them accordingly. What is the reasoning behind adding rounded corners, isn’t that the effect you wanted to achieve?

    I have also been unable to move the post title and post date to the bottom of the Loop Item, can you advise on that also.

    Select the loop item block and set those CSS settings in the block editor.

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

  • gandalf12
    July 28, 2026 at 3:12 am

    Hi George,

    Thanks for the reply.

    Yes I wanted the images to have rounded corners but to remain square not rectangular.

    I have been able to move the post title and post date to the bottom after following your instructions, thank you for that.

    I am still unable to change the text colour for the post title.

    Thanks

  • gandalf12
    July 28, 2026 at 3:14 am

    Hi George,

    I have also recuced the bottom-padding on the loop item to move the post title and post date further down and this has had the effect of reducing the size of the images as well, can this be countered some how?

    Thanks

  • George
    July 28, 2026 at 4:02 am

    Hello,

    For the image sizes: Set aspect-ratio: 1; on the loop item in the block editor.

    For the link color: Try removing color values in Appearance -> Customizer -> Colors -> Content -> Links. They are usually not needed and can create issues. Body link colors are usually enough.

    Content link colors

    Let me know how it goes.

  • gandalf12
    July 28, 2026 at 4:15 am

    Hi George,

    Thanks for the prompt reply, setting the aspect ratio has solved the image shape issue, now back to square.

    There were no colour values set for Content Links in the customizer, any other thoughts?

    Thanks

  • George
    July 28, 2026 at 4:39 am

    Hello,

    You would need to style the link selector instead with the color you want.

    Block link selector

  • gandalf12
    July 28, 2026 at 5:30 am

    Hi George,

    Many thanks, don’t know why I didn’t remember that all good now.

    Thanks

  • George
    July 28, 2026 at 6:53 am

    Great, no problem!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.