Align card headers and footers across a row with subgrid

One card has three lines of description, so its button sits lower than every other card in the row.

Intermediate to advancedRead 5 minDoing: under an hour5 steps

What you'll have at the end

A row of cards whose headers, bodies and footer buttons land on shared lines, done with subgrid and no height measuring code

Before you start

You need

A row of card components already rendering side by side, such as plan or pricing cards, each one built from a header, a body block listing a few items, and a footer with one action button, with at least one card's body noticeably longer than the others.

Not covered

Making the row's own card count grow or shrink fluidly with auto-fit or auto-fill (subgrid needs an explicit column count to inherit), and lining up individual list items inside the body block line by line; this recipe only shares the three outer bands, not every line within them.

Leans on

5 steps

Where to go next

Decide whether a layout needs Grid or Flexbox before you build it

If Grid isn't even the confirmed right tool for this card row yet, settle that first.

Checked 20 Aug 2026

Part of the CSS Grid Layout cookbook