Tricky Query Loop Grid Layout with GenerateBlocks: Query Loop-A-Palooza!

Welcome to part three of Query Loop-a-Palooza. In this tutorial, I’m going to show you how to build out a query loop based on a recipe website, showcasing the top five articles in the hero section.

Here’s the completed design I created from scratch in Figma. It features five top articles from a website I created, with the middle one being the most recent, featured article. The remaining four are arranged on the left and right. There are a few tricks to getting this layout set up properly—specifically making sure the middle one is the latest post and spans two columns.

Let’s jump into GenerateBlocks and start building.

Setting Up the Query Loop in GenerateBlocks

I’ve already got my page set up. I’m starting by adding a new container block and applying one of my global classes for a medium-sized container—it adds some preset padding. Inside that, I’ll add an inner container and then insert the GenerateBlocks Query Loop block.

Just like the past two episodes, I’m starting with a blank template. You could use one of the presets, but those pull in background colors and padding I don’t want to mess with.

Inside the query block, I’m selecting “Posts” as the post type and limiting it to five posts. That’s all we need.

Next, I’ll add a class called news-grid to the loop item and set its layout to a four-column grid. Even though it looks like there are only three columns in the design, the middle featured article spans two columns—so we need four total.

Building the Card Layout

Looking at the elements in each card, we’ll need a featured image, category terms, post title, and post metadata (date and author).

1. Featured Image: Insert an image block and set its dynamic tag to Featured Image.
2. Categories: Add a text block and set its dynamic tag to Term List, selecting “Categories” as the taxonomy. Use a bullet separator (option+8) to space them.
3. Post Title: Insert a headline block and use the dynamic tag for Post Title.

For the metadata, since we want the date and author side-by-side, I’ll use a flex container:

• Inside the container, insert a text block for the post date.
• Duplicate it for the author name, changing the dynamic tag to Author Meta and selecting “Display Name.”
• Add the word “by” before the author name in the edit tab.
• Set the container’s layout to Flex, align center, and add about 12px of column gap.

Now that all elements are in place—image, categories, title, and metadata—we can begin styling.

Styling the Cards

Inside the news-grid class:

• Image: Set aspect ratio to 16/9, width to 100%, object-fit to cover, and a border-radius of 3px. Add 4px bottom margin.
• Categories: Pull the color from the Figma file, font size of 12px, weight 600, uppercase text, letter-spacing 0.05em, and zero bottom margin.
• Post Title: Create an H2 selector and set its font size to 24px.
• Metadata: Font size 14px, author weight 600, and shared text color #747474.

Add 1.5rem of column gap and 1rem of row gap to the grid.

Making the Featured Post Stand Out

To highlight the first (most recent) post in the center:

• Create a new selector :first-child and set its grid column to 2 / 4 and grid row to 1 / 3.

This places the featured post in the center and spans two columns.

Now we add the excerpt, but only for the featured post:

• Insert a text block for the excerpt.
• Add a class news-excerpt and set it to display: none.
• Back in the news-grid class, target .news-excerpt:first-child and set it to display: block.

Final Styling and Tweaks

A few final polish touches:

• Categories: Reduce font size to 10px.
• Image Margin: Increase bottom margin to 8px.
• Metadata: Reduce font size to 12px, remove bottom margin.
• Excerpt: Add 1rem top padding for spacing.
• Featured Title: Create a :first-child h2 selector and increase its font size to 38px.

Now we have a visually striking layout where the latest article appears prominently in the center with an excerpt, while the others line up cleanly beside it.

Making It Responsive

In the Customizer:

• Tablet View: Set grid to two columns. Update the featured post to span 1 / -1 in grid columns so it goes full width.
• Mobile View: Keep the two-column layout. Shrink the H2 font size to 20px. In the metadata container, enable Flex Wrap so the author wraps beneath the date if needed.

Don’t Forget the Links

To finish, make sure your post titles are clickable:

• In the Post Title block, link to the post using the dynamic tag.
• Style the link (text color, no underline) in your news-grid class.

Testing the Query Logic

As a final test, if you change the publish date of a different post to make it the most recent, it should automatically move into the featured center position and display its excerpt—just like “Five Cozy Fall Soups” did in this example.

Thanks for following along with part three of Query Loop-a-Palooza. I’ve had a lot of fun building these query loops. If you have any layouts you’d like me to create, leave a comment with your ideas.