Entry 03

Subgrid rows shared across cards

Use it when cards in a row have parts that should line up, such as title, body and footer, whatever the length of their content.

Open

Titles, bodies and footers line up across a row, whatever their length. Change the width to reflow the rows.

Code CSS · 12 lines

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.5rem;
}

Why it works, the rules and the credits 1 reason · 2 rules · support · credits

Why it works

Each card spans three rows of the parent grid and adopts those tracks. The tallest title in a row sets the title height for every card in that row.

Rules

The span must equal the number of parts in the card. Without grid-row: span N every part piles into one row.
Set row-gap on the card, or it inherits the parent's gap between its parts.

Support

Chrome: 117
Firefox: 71
Safari: 16

Credits

Borrowed from: Josh W. Comeau, Brand New Layouts with CSS Subgrid, 2025-11-25 · Kevin Powell, Subgrid & Container Queries change how we can create layouts, 2023-10-26