Subgrid
css subgrid, grid-template-columns: subgridDefinition
A CSS Grid feature — grid-template-columns: subgrid (or rows) on a child that is itself a grid — that makes the child use its parent’s tracks instead of its own, so that nested content aligns to the outer grid: every card in a row puts its title, body and footer on the same lines as its neighbors
The answer to the oldest card-grid complaint: descriptions of different lengths pushing the footers out of line. Before subgrid the fixes were a fixed height, a min-height guess, or JavaScript; with it, the card spans three parent rows, declares grid-template-rows: subgrid, and its three parts land on the parent’s rows whatever the neighbors do. Baseline across browsers since 2023. The resource card on this site is a flex row and does not need it yet; a sectioned catalog with aligned metadata would be the first place to use it.
A child that borrows its parent’s ruler. The alignment problems it solves were never hard to describe and were always hard to do, which is the mark of a feature that should have existed sooner.