CSS Subgrid: Align Nested Grid Items with Parent Tracks

What Subgrid Solves

CSS Subgrid solves a fundamental Grid layout problem: nested grids can’t align with their parent’s tracks. Without subgrid, a card’s internal elements (image, title, description, footer) can’t align across cards — each card’s grid is independent. With subgrid, a child grid inherits its parent’s track definitions, so all cards share the same row heights. This means card titles align, descriptions start at the same point, and footers stick to the bottom — regardless of content length.

Subgrid Syntax

Apply subgrid by setting grid-template-rows: subgrid; or grid-template-columns: subgrid; on a grid item that is itself a grid container. The child inherits its parent’s track sizes for that axis. Example: a card spanning 3 parent rows sets display: grid; grid-template-rows: subgrid; and its children (image, content, footer) align to the parent’s row tracks. Use the CSS Grid Generator to prototype grid structures visually.

Practical Use Cases

Best use cases: card grids where internal elements must align across cards (most common), form layouts where labels and inputs align across multiple form groups, tables-without-tables where data rows need consistent column widths, and dashboard widgets where headers, content, and footers align vertically. Subgrid is the correct solution for any layout where nested elements need to participate in a parent’s grid alignment.

Browser Support

Subgrid is supported in Chrome 117+, Firefox 71+, Safari 16+, Edge 117+. Global support exceeds 90%. For older browsers, provide a flexbox-based fallback that won’t have cross-card alignment but still looks reasonable. Feature-detect with @supports (grid-template-rows: subgrid). For new projects in 2026, subgrid is safe to use as the primary approach for card-style layouts.