You know this bug even if you never filed it: three pricing cards side by side. One title wraps to two lines. Now its price sits lower than its neighbours’, the feature lists start at different heights, and the buttons float at three different baselines. Each card is internally consistent and collectively a mess.

The cause is structural: CSS grid tracks only exist between parent and direct children. Grandchildren—the title, price, button inside each card—cannot see the shared grid. Subgrid gives them sight.

Inheriting the tracks

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: grid;
  grid-row: span 4;
  /* adopt the parent rows instead of making my own */
  grid-template-rows: subgrid;
}

Each card spans four parent rows—title, price, features, button—and lays its children on those shared rows. The tallest title in the row sets the title row height for everyone. Prices align. Buttons align. No JavaScript height-matching, no min-height guesses.

“Alignment is a promise between siblings. Subgrid lets their children inherit it.”

Where it earns its keep

Comparison tables built from cards, form layouts where labels and inputs align across fieldsets, timeline layouts where dates and content share tracks—anywhere structure repeats but content length varies. Support is green across all modern engines, and the fallback is graceful: without subgrid, cards simply size their own rows—the layout you already have. Adopt it wherever repetition meets ragged content.