CSS Subgrid Demo — grid-template-rows: subgrid Snippet

CSS Grid solved most two-dimensional layout problems, but it had one long-standing gap: a grid item that was itself a grid container could not align its own rows or columns to its parent's tracks. If you built a row of product cards where each card internally used a 3-row grid (image, title, price), every card's internal rows sized independently, based only on that card's own content — so a card with a two-line title would get a taller title row than its neighbors, and the price row beneath it would no longer line up horizontally across the row. This is exactly the "ragged card grid" problem countless product listings, pricing tables, and dashboard tiles run into. The subgrid value for grid-template-columns and grid-template-rows, part of CSS Grid Level 2 and supported in Chrome/Edge 117+, Firefox 71+, and Safari 16+ (meaning full baseline support across evergreen browsers by 2023), closes this gap directly at the platform level.

How subgrid works technically

Normally, when you write display: grid on an element that is itself a grid item, its grid-template-columns and grid-template-rows define a brand-new, independent set of tracks scoped only to that element's own children — there is no relationship to the parent grid's tracks at all. Writing grid-template-rows: subgrid (or grid-template-columns: subgrid) instead tells the browser: "don't create new tracks — adopt the row (or column) tracks of the ancestor grid item that this element spans." The element must actually span multiple track lines of the parent for this to be meaningful, which is why this demo's .product-card uses grid-row: span 3 — it explicitly claims 3 of the parent grid's row tracks so that subgrid has real parent tracks to inherit. Once subgridded, each of the card's own grid items (the image, title, and price row) is positioned into the corresponding *parent* track, and — critically — the *sizing* of those tracks (how tall each row is) is now computed across all sibling cards simultaneously, not per-card. That's what makes titles, images, and price rows align perfectly across every card in the row, even when their content lengths differ.

Why this matters for modern UI development in 2025/2026

Card grids, comparison tables, and any repeated-component layout ("all these things must visually align even though their content differs in length") used to require either JavaScript row-height measurement/syncing (expensive, layout-thrashing, and fragile on resize), or a hacky flattened single-level grid where you gave up the semantic nesting of "card contains image, title, price" and instead put every image/title/price as siblings directly in the parent grid (breaking HTML semantics and complicating styling per-card). Subgrid lets you keep the natural nested markup — a .product-card component that is a self-contained, reusable unit — while still getting perfect cross-card alignment, purely through CSS. This is a meaningful capability for any team building a component library where a "Card" component needs to visually align with its siblings when repeated in a grid, without the Card component needing to know anything about its siblings.

What this demo shows

Toggle the switch to compare both states side by side using the same markup. In "Independent grid" mode, each card's grid-template-rows: auto auto auto sizes its own three rows purely from its own content, so the headphones card (with a longer title) has a taller title row than its neighbors, pushing its price row down and breaking alignment. Switch to subgrid mode, and the same cards adopt grid-template-rows: subgrid, which makes all four cards' rows size together — the parent grid computes one shared height per row track across every card that spans it, so every price row lands on the same horizontal line regardless of title length.

Browser support and fallback strategy

Subgrid support is solid across evergreen browsers today, but for any project needing to support older browser versions, feature-detect with @supports (grid-template-rows: subgrid) and provide an independent-grid fallback — visually imperfect alignment, but a functional layout.