CSS Subgrid: Browser Support, Features, Use Cases

What is CSS Subgrid?

CSS Subgrid is a value of the grid-template-columns and grid-template-rows properties, defined by the W3C CSS Grid Layout Module Level 2. When set, a nested grid stops creating its own tracks and reuses the parent grid's row or column tracks, so child items align with the parent grid lines.

Which browsers does CSS Subgrid support?

CSS Subgrid is now Baseline Widely available. Every major engine ships it by default on desktop and mobile, with global support above 92 percent.

What are the key features of CSS Subgrid?

CSS Subgrid layers a small set of behaviors on top of CSS Grid that solve nested-grid alignment without JavaScript. Each piece composes with regular grid placement, so existing layouts only need a few extra lines to opt in.

• Track inheritance: The subgrid value on grid-template-columns or grid-template-rows tells a nested grid to use the parent's tracks instead of creating its own.
• Two-axis subgrids: Apply subgrid to both grid-template-columns and grid-template-rows so the child aligns on rows and columns at once, useful for full-bleed cards.
• Local line numbering: Line numbers reset inside the subgrid; line 1 is always the first line of the subgrid, so component code stays portable across placements.
• Inherited gaps: The gap, row-gap, and column-gap values flow from the parent into the subgrid, with overrides allowed when a section needs different spacing.
• Named line inheritance: Named grid lines on the parent flow into the subgrid, and the subgrid can declare extra line names alongside the inherited ones.
• Span-based sizing: The number of tracks the subgrid receives matches its grid-column or grid-row span, so authors size by span rather than by track count.
• Auto-placement still works: Items inside a subgrid auto-place into the inherited tracks, so flow layouts and explicit placement compose normally.

What are the use cases of CSS Subgrid?

Subgrid replaces the JavaScript and ad-hoc CSS hacks that used to power cross-row alignment in card grids, editorial pages, and forms. The same CSS keeps layouts aligned on every breakpoint without measurement scripts.

• Card grids with consistent rows: Align titles, body text, and call-to-action buttons across cards of varying content length without setting fixed heights on each row.
• Editorial layouts: Pull article headings, lead paragraphs, and footnotes into the page-level macro grid so a column of stories shares a common baseline.
• Form layouts: Line up labels, inputs, and helper text across a long form, even when sections live inside nested fieldsets.
• Pricing tables and feature matrices: Stack pricing tier cards so feature rows align horizontally across columns, regardless of row content height.
• Product detail pages: Tie photo galleries, description blocks, specifications tables, and review summaries to the same parent grid without overriding gaps.
• Page-level macro grids: Define the application shell once on the body and let header, sidebar, main, and footer pull their tracks from the same source.

How do you check if a browser supports CSS Subgrid?

CSS exposes a one-line @supports gate, and JavaScript exposes feature detection through CSS.supports(). Both run inside the browser with no build step, so a layout can ship a fallback for older builds in a single conditional.

• Open DevTools console: Press F12 or right-click the page and choose Inspect, then switch to the Console tab.
• Run the column-axis check: Paste CSS.supports("grid-template-columns: subgrid") into the console and press Enter. A return value of true means the browser parses subgrid on columns.
• Probe the row axis: Run CSS.supports("grid-template-rows: subgrid") to confirm subgrid works on rows as well as columns in the same browser build.
• Wrap CSS in @supports: Add @supports (grid-template-columns: subgrid) around your subgrid layout and put a regular CSS Grid fallback outside it for older builds.
• Run the snippet below: Paste it into the console or ship it inside your page to log a single ready or not-ready line you can pick up in QA logs.

function checkSubgrid() {
    const supportsColumns = CSS.supports("grid-template-columns: subgrid");
    const supportsRows = CSS.supports("grid-template-rows: subgrid");

    if (supportsColumns && supportsRows) {
        console.log("CSS Subgrid is ready in this browser.");
        return true;
    }
    console.log("CSS Subgrid is not available. Fall back to nested CSS Grid with explicit track sizing.");
    return false;
}

checkSubgrid();

If supportsColumns returns true but supportsRows returns false, the browser is on a partial implementation that only covers one axis; render a flat grid for those builds rather than a two-axis subgrid layout.

What are the known issues with CSS Subgrid?

Subgrid is mature in every major engine, but a few rough edges around implicit tracks, intrinsic sizing, and DevTools still show up in production work.

• No implicit grid in subgridded dimensions: When both axes use subgrid, extra items pile up in the last track instead of growing the grid; remove subgrid from one axis to restore implicit tracks.
• Auto-track sizing leaks upward: Content inside an auto-sized subgrid track can change track sizing on the parent grid, which can cascade across siblings and break alignment.
• Intrinsic sizing edge cases: The min-content and max-content tracks behave differently inside subgrids than inside regular nested grids; check key breakpoints when migrating an existing layout.
• DevTools coverage gaps: Chrome and Firefox DevTools draw subgrid track lines, but Safari Web Inspector still shows the parent grid only, so debugging on macOS often means switching browsers.
• Older Apple devices miss it: Macs stuck on macOS Big Sur, iPhones on iOS 15, and iPads on iPadOS 15 cannot install Safari 16, so subgrid silently falls back to a nested grid on those devices.
• WebView lag: Android WebView and iOS WKWebView track their host engine, so a hybrid app on an Android 12 WebView with Chromium 116 cannot render subgrid even when the host phone has a newer Chrome installed.
• Print and paged-media glitches: Browsers handle subgrid inside @page rules inconsistently, so print stylesheets that mix subgrid and page breaks need extra cross-engine testing.

In my experience, the failure that catches teams off guard is the implicit-track surprise: a card grid built with subgrid on both axes drops the last few cards into the bottom row when stock data is uneven, with no console warning. Switch to grid-template-rows: auto on the child whenever the row count is data-driven.

Citations

All CSS Subgrid version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Grid Layout Module Level 2: w3.org/TR/css-grid-2
• CSSWG Editor's Draft - css-grid-2: drafts.csswg.org/css-grid-2
• MDN Web Docs - Subgrid guide: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid
• MDN Web Docs - grid-template-columns: developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
• MDN Web Docs - grid-template-rows: developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
• web.dev - CSS subgrid: web.dev/articles/css-subgrid
• Chrome Platform Status - CSS Subgrid: chromestatus.com/feature/5663795354533888
• WebKit blog - WebKit features in Safari 16.0: webkit.org/blog/13152/webkit-features-in-safari-16-0
• Mozilla Firefox 71 release notes: mozilla.org/en-US/firefox/71.0/releasenotes
• Wikipedia - CSS grid layout: en.wikipedia.org/wiki/CSS_grid_layout