How to Create Equal Height Cards (+ Make the Last Item Stick) Using GenerateBlocks

When working with the Query Loop block in GenerateBlocks to build out elements like blog cards, you might find yourself frustrated when your cards end up with different heights due to varying content lengths. This can lead to a messy, unaligned layout on your site. If you’ve ever wanted to ensure that all your cards have the same height, with elements like the date or author name aligned at the bottom, this tutorial will show you exactly how to achieve that.

Why Equal-Height Cards Matter

When your blog cards or any other grid items are aligned, it creates a more cohesive and professional look. Misaligned cards can make your layout feel cluttered and unpolished. By ensuring that your cards have equal heights and that key elements are consistently positioned, you enhance the visual appeal of your site.

Step-by-Step Guide to Achieving Equal-Height Cards

Here’s how to make sure your blog cards are all the same height, with the date (or any other element) aligned at the bottom of the card:

1. Set Up Your Query Loop Block

Start by setting up your Query Loop block in GenerateBlocks. For this example, I’ve created a sample blog page with a grid of blog cards. Each card contains a title, content, and a date.

2. Activate Flex Layout

To ensure everything works correctly, make sure your grid is utilizing the Flex layout.

• Go to the Post Template container within the Query Loop block.
• In the Layout section, make sure Flex is selected. This is crucial for achieving the desired alignment.

3. Set the Container Height to 100%

Next, you’ll want to ensure that all your cards have the same height, regardless of the content length:

• Select the Post Template container in your grid.
• Go to the Sizing panel.
• Set the Height to 100%.

This setting ensures that each card will stretch to the full height of the container, making all cards equal in size.

4. Align Elements to the Bottom

Now that your cards are the same height, you’ll want to make sure the date or any other key element sticks to the bottom of the card:

• Select the element you want to stick to the bottom—in this case, the Post Date.
• Go to the Spacing panel.
• Set the Top Margin to Auto.

This simple adjustment will push the date to the bottom of the card, aligning it perfectly with the other cards on the page.

5. Preview Your Changes

Once you’ve made these adjustments, preview your page to see the results:

• All your cards should now be perfectly aligned with equal heights.
• The dates (or any other specified elements) should all be aligned at the bottom of each card.

Applying This Technique Beyond the Query Loop Block

While this tutorial focuses on the Query Loop block, you can apply the same technique to other layouts in GenerateBlocks. Anytime you want to ensure equal heights and consistent element positioning within a container, remember to:

1. Set the container’s height to 100%.
2. Use Auto for the top margin of the element you want aligned at the bottom.

Conclusion

Achieving equal-height blog cards and aligning elements consistently can greatly improve the design and usability of your website. With just a few tweaks in GenerateBlocks, you can create a more polished and professional layout. Once you get the hang of this method, you’ll find it’s easy to apply across your projects, making your designs more cohesive and visually appealing.