Back to digital garden
CSS•

CSS Subgrid Mental Model

Align card headers and footers across independent grid tracks without layout hacks.

CSS grid-template-rows: subgrid allows child elements inside grid items to align with the parent grid tracks:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

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

Now all headers, body excerpts, and action buttons align horizontally across every card in a row, regardless of text length.