subgrid is not flex, but people keep confusing them
An interview question I started asking last year: “Given a row of three cards, each containing a header, body, and footer, how do you make all three headers the same height regardless of content?” Roughly half of candidates reach for flex. None of those answers work.
Why flex cannot do it
Flex sizes items independently per line. Each card is its own flex container with its own header, body, footer, and there is no mechanism for the header in card A to know the header in card B exists, much less to align with it. align-items: stretch aligns items within their own line, not across siblings. The parent flex row aligns the cards as wholes; their internal contents are invisible to each other.
You can fake it by giving every header a fixed height, but content-driven sizing is impossible. This is not a flex bug; it is the design intent. Flex is one-dimensional layout that flows.
How subgrid does it
Per CSS Grid Layout Module Level 2, a grid item with display: grid can use grid-template-rows: subgrid to inherit the parent grid’s row tracks. The headers across all cards now share a single row track, which sizes to the tallest of them. The bodies share the second row, footers the third.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}Three rules. Each card’s three children automatically land in the parent’s rows. Content alignment across siblings — the thing flex cannot express — falls out for free.
Browser support
Firefox shipped subgrid in 2019. Safari 16 added it in September 2022. Chromium followed last, in Chrome 117 (September 2023). As of 2025, baseline support is universal in evergreen browsers. Rachel Andrew’s “CSS Subgrid is shipping to Chrome” on web.dev (Google, 2023) is the canonical migration guide.
When flex still wins
Flex is correct when items genuinely should size independently — chips, tag clouds, toolbars, navigation. Subgrid is for when sibling items have structural correspondence: card grids, form rows where labels should align across columns, comparison tables. The shape of the problem decides.
The hybrid pattern
Mixed layouts are common: outer grid with subgrid for cross-card alignment, inner flex inside each card’s body for chip rows. Each tool does its own job. Trying to force one tool to do both is where layouts get brittle.
Related
Get FlexFrog on the App Store. Built by Moruk Labs.