Subgrid
Let nested grids borrow their parent's tracks so cards in a row line up perfectly, no matter their content.
Here's a problem that used to have no clean answer: a row of cards, each with a title, a body of varying length, and a footer button. You want every title, every body, and every button aligned across all cards — but each card is its own grid, so their internal rows don't know about each other.
Subgrid solves it. A child grid declares grid-template-rows: subgrid (or columns), and instead of creating its own tracks it adopts the parent's. Suddenly every card shares one set of row lines, and everything aligns.
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card {
display: grid;
grid-row: span 3; /* occupy 3 parent rows */
grid-template-rows: subgrid; /* and align to them */
}Why it matters
Before subgrid, this required equal-height hacks, JavaScript measuring, or forcing fixed heights that broke on long content. Subgrid makes the alignment intrinsic — it just tracks the tallest title, tallest body, and so on, automatically.
It works on both axes, and it's now supported across all major browsers.
Example
When to use it
- A developer uses subgrid on a set of cards so all card titles, body text, and CTAs align to the same grid row across the row, regardless of content length.
- A designer places a nested table inside a grid layout and uses subgrid to inherit the parent's column tracks for pixel-perfect column alignment.
- A developer eliminates height hacks on card components by letting them inherit the parent grid's row tracks via grid-row: subgrid.
More examples
Card row with subgrid alignment
Each card spans four parent row tracks and inherits them via subgrid so image, title, body, and CTA rows align across all cards.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* define internal row tracks: image | title | body | cta */
grid-template-rows: auto auto 1fr auto;
gap: 24px;
}
.card {
display: grid;
grid-row: span 4; /* occupy all 4 row tracks */
grid-template-rows: subgrid;
background: #fff;
border-radius: 8px;
overflow: hidden;
}Subgrid inheriting column tracks
A nested article inherits the parent's 12-column grid so a figure inside it can span all inherited tracks for a full-bleed layout.
.page-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 16px;
}
.article {
grid-column: 2 / 12;
display: grid;
grid-template-columns: subgrid;
}
.article figure {
grid-column: 1 / -1; /* spans all inherited columns */
}Feature comparison table via subgrid
Each .row spans all columns and uses subgrid so every cell aligns to the parent grid's column tracks perfectly.
.comparison {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
}
.row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
border-bottom: 1px solid #eee;
}
.row > * { padding: 12px 16px; }
Discussion