Subgrid

The plain-language idea

Put a grid inside an item that's itself part of a grid, and by default the two grids know nothing about each other. The outer grid lays out its items; the inner grid, inside one of those items, defines its own independent set of column and row tracks sized only by its own content. There's no built-in relationship between the outer grid's lines and the inner grid's lines — which is exactly why aligning content across sibling items (say, five pricing cards, each with a different amount of feature text) used to require fragile workarounds: fixed heights, JavaScript measuring the tallest element, or <table>-style layout pressed into service purely for alignment.

subgrid removes that gap. Instead of an inner grid defining its own tracks, grid-template-columns: subgrid (or grid-template-rows: subgrid) tells it to inherit the exact track sizing already established by its parent grid. The inner grid's lines then line up precisely with the outer grid's lines, which means items in different subgrids — different cards — can align to the same row or column position, because they're all ultimately measured against the one outer grid.

See it in a real thing: pricing cards that align across the row

.pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

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

Each .pricing-card is a grid item of .pricing-row, but it's also a grid in its own right, spanning four rows: title, price, feature list, and a call-to-action button. Without subgrid, each card would size those four internal rows independently — a card with a longer feature list pushes its own price and button down, while a card with a short list keeps everything compact, so nothing lines up across the row even though the cards sit side by side. With grid-template-rows: subgrid, all three cards' internal rows are locked to the same four row tracks defined once, at the outer .pricing-row level. The tallest card's content in each row determines that row's height for every card, so every title sits on the same line, every price sits on the same line, every button sits on the same line — real alignment, driven by layout, not by matching numbers by hand.

What people usually miss

Watch out

• Subgrid inherits track sizing, not content. It doesn't automatically place child elements into the right rows for you — you still position subgrid children with normal grid placement (implicit auto-placement or explicit line numbers); what changes is that those positions now line up with the parent's tracks instead of the item's own independent ones.
• You can subgrid one axis without the other. grid-template-columns: subgrid with grid-template-rows left as a normal track definition is completely valid — inherit alignment on the axis that needs it, keep independent sizing on the axis that doesn't.
• Gaps aren't automatically inherited. A subgrid can define its own gap value independent of the parent grid's gap, which is easy to forget and can produce visually inconsistent spacing between rows/columns if left unset.
• Support is newer than flexbox or basic grid — treat it as a progressive enhancement for alignment polish rather than something a layout structurally depends on. A grid without subgrid still lays out and remains usable; it just won't get the precise cross-item row alignment until subgrid support is safe to rely on for the audience. Feature-detect with @supports (grid-template-rows: subgrid) if the layout needs a distinct fallback.

Why this matters in interviews

"How would you align the internal rows of a set of card components across a row, when each card has a different amount of content?" tests whether a candidate reaches for a real layout primitive (subgrid) or a JavaScript height-matching hack — the honest, complete answer also names the @supports fallback for browsers where subgrid isn't safe to assume.