Grid had a hole in it from the start, and everyone who built card layouts fell into it. You could lay out a set of cards beautifully with Grid. What you could not do was make the insides of those cards line up with each other — because each card was its own grid, sealed off from its neighbours and from the parent. Subgrid fills that hole, and the difference it makes is easiest to see by comparing the two worlds directly.
The layout that never quite worked
Picture a row of three cards. Each has a title of a different length — one wraps to two lines, the others to one — then an image, then a description, then a button pinned at the bottom. You want the images to start at the same vertical position across all three cards, and the buttons to sit on the same baseline. It's the kind of alignment a print designer would take for granted.
Before subgrid, you couldn't have it. Each card was an independent grid or flex container. A two-line title in the first card pushed that card's image down, while the single-line titles left their images higher. The rows inside each card knew nothing about the rows inside the others. The usual "fixes" were all compromises: force every title to a fixed height and truncate anything longer, or abandon per-card layout and flatten the whole thing into one grid with painful markup. Neither is what you actually wanted.
What subgrid changes
Subgrid lets a nested grid opt out of defining its own tracks and instead inherit the tracks of its parent. The child stops being a sealed box and becomes part of the parent's grid. When several cards all share the parent's rows, their internal pieces align across cards — because they are, genuinely, on the same grid lines.
Here's the setup. The parent defines the rows every card will share: title, media, body, and actions.
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}That single line — grid-template-rows: subgrid — is the whole feature. The card no longer invents its own rows. It adopts the four rows it spans from the parent. Now the title row is one shared row across all cards, the media row is one shared row, and so on. The two-line title in card one makes the shared title row taller, which means every card's title row is taller, which means every card's image starts at the same line. The buttons align for the same reason. The alignment you always wanted falls out automatically.
It isn't only for cards
The card grid is the headline example because it's so common, but the same mechanism solves a second long-standing annoyance: forms. A label-and-input form where you want every input to start at the same x-position, regardless of how long each label is, is the horizontal version of the same problem. Make each row a subgrid of a two-column parent and the inputs line up perfectly, with no guessing at label widths.
.form {
display: grid;
grid-template-columns: auto 1fr;
}
.field {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
}The honest status
Subgrid is supported across the current versions of all the major browsers, so it is a reasonable default in new work rather than a bleeding-edge bet. Where you're supporting older versions, the graceful path is straightforward: a browser that doesn't understand subgrid falls back to the child defining its own tracks — which is precisely the pre-subgrid behaviour. The cards still render and function; their internals just don't cross-align. That's the same slightly-uneven layout you would have shipped anyway before this existed, so nothing regresses.
The reason subgrid feels bigger than a single property is that it removes a class of layout hack rather than adding a new trick. All the fixed heights, the truncated titles, the flattened markup that existed only to fake alignment across independent containers — you can delete them. The nested grid can finally speak the same coordinate system as its parent, which is what most people assumed Grid could do all along.
