Subgrid
Subgrid is a CSS Grid Layout feature that lets a nested grid container inherit the row and/or column tracks of its parent grid, rather than defining its own independent track sizing. This allows nested elements to align precisely with the…
Definition
Subgrid is a CSS Grid Layout feature that lets a nested grid container inherit the row and/or column tracks of its parent grid, rather than defining its own independent track sizing. This allows nested elements to align precisely with the outer grid's lines, even across multiple levels of DOM nesting.
Overview
In standard CSS Grid, a grid item that is itself a grid container defines its own completely independent set of rows and columns — even if it happens to sit inside a larger grid, its internal grid tracks have no inherent relationship to the parent grid's tracks. This has historically made it difficult to align content across nested components: for example, a page-level grid defining columns for a card layout, where each card internally also needs a grid (for a title, image, and description), but those internal grid lines don't line up with the outer grid's lines, especially when cards have varying content heights. Subgrid solves this by letting a nested grid container specify `grid-template-columns: subgrid` and/or `grid-template-rows: subgrid` instead of defining its own explicit track sizes. When set, that nested grid doesn't create new tracks — it inherits the actual track sizing from the corresponding lines of its parent grid, meaning its own grid items align to the exact same column or row boundaries as items anywhere else in the outer grid, even though they're several levels deep in the DOM. This is especially powerful for maintaining consistent alignment across repeated card-like components: if one card's title happens to wrap to two lines, subgrid can keep every other card's title, image, and description rows aligned to the same horizontal lines across the whole row, something that was previously only achievable with JavaScript measurement hacks or fragile fixed heights. Before Subgrid shipped, achieving this kind of cross-component alignment required either flattening the DOM structure to avoid nested grids entirely, using JavaScript to measure and synchronize heights across sibling components, or accepting misaligned layouts. Subgrid reached full cross-browser support somewhat later than other modern CSS Grid features — Firefox implemented it first, with Chrome and Safari catching up by 2023 — making it one of the more recently-completed pieces of the CSS Grid specification, and it's particularly valued in design systems and component libraries where consistent alignment across independently-authored, nested components matters.
Key Concepts
- Nested grid inherits row and/or column tracks from its parent grid instead of defining its own
- Enabled via `grid-template-columns: subgrid` and/or `grid-template-rows: subgrid`
- Aligns nested content precisely to outer grid lines across multiple levels of DOM nesting
- Solves cross-component alignment problems (e.g., matching card rows) without JavaScript
- Complements, rather than replaces, standard independent nested grids
- Reached full browser support (Chrome, Safari, Firefox) by 2023
- Particularly valuable in card-based or component-repeated layouts
- Part of the CSS Grid Layout Level 2 specification