Subgrid: three real cases

Subgrid solves one precise problem: a component must align to the tracks of its container, not merely sit inside it. Three cases where it earns its place, with the minimum code and the limits no guide mentions.

Case 1: cards with aligned titles and prices

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

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

.card h3,
.card p,
.card .price,
.card .cta {
  margin: 0;
}

The parent declares the rows, the cards inherit them with grid-template-rows: subgrid and the inner margins disappear. Titles, copy and prices start at the same height even when one text runs twice as long.

Case 2: label and value pairs

.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: repeat(4, auto);
  column-gap: 2rem;
  row-gap: 0.5rem;
}

.spec-group {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

Two columns and four shared rows: labels stay as wide as the longest one and values line up across groups. Flexbox would need a guessed fixed width, which breaks at the first translation.

Case 3: a component inside the page grid

.page {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 12rem;
  gap: 2rem;
}

.form {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.form .field {
  grid-column: 2;
}

The form does not invent a grid of its own: it uses the three page columns, so fields start on the same line as the text above. The component stays reusable because it knows the track count, not the measurements.

When you do not need it

The record and the command

A finished grid list is grid-list-01; the primitives sit in card and the prices in pricing. The catalogue holds 1,556 blocks from 1,472 libraries (1 November 2026).

# cerca le griglie annidate che potrebbero ereditare le tracce
grep -rn "grid-template-columns" --include="*.css" src/ | wc -l

# verifica il risultato a due larghezze
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 wide.png

The known limit

The child must cover exactly the rows it wants to inherit: with grid-row: span 3 on a four-row parent, the last row stays outside and the alignment breaks with no warning. The second limit is support: 94.43% leaves out Safari before 16, where the layout falls back to independent grids.

For named areas built on the same idea see Grid with named areas. For the starting layout model see Flexbox or Grid; the comparison between utilities and CSS Modules is Tailwind vs CSS Modules.