How do I make CMS Collection cards equal height in Elements?

Elements
1

Hi everyone,

I’m using RapidWeaver Elements 2.4.4 and displaying blog posts using a CMS Collection in a 4 column layout.

Each blog card contains an image, date, title and summary. The problem is that the cards end up with different heights because some titles/summaries are longer than others.

I’d like each row of cards to automatically match the height of the tallest card in that row, similar to equal height cards in CSS Grid or Flexbox.

I’ve tried:

  • Setting the Blog Card to a Flex column layout
  • Using h-full, flex, flex-col and grow Tailwind classes
  • Setting a fixed minimum height

The fixed minimum height works, but I’d prefer the cards to automatically stretch to the height of the tallest card in each row.

Is there a built in way to achieve this with a Collection in Elements, or is custom CSS required?

If custom CSS is the only option, what’s the recommended approach?

Many thanks,

John

2

could you share your project? that way we can take a look at how you have it setup and offer a solution for your layout :slight_smile:

3

Hi Ben,

Thanks for the reply.

I managed to sort it in the end by rebuilding everything from scratch.

Cheers,

John