Codectionary / Developer documentation / CSS

Subgrid

subgrid lets a nested grid container inherit the track sizing of its parent grid, instead of defining its own independent tracks. This solves a long-standing alignment problem: getting content in different, unrelated grid items (like card headers and footers) to line up perfectly across a row.

Syntax

grid-template-columns: subgrid;
grid-template-rows: subgrid;

Examples

Aligning Nested Content Across Cards

Without subgrid, each card's internal grid is independent - titles and buttons will not align if content lengths differ.

/* Demo setup: sizing, structure or neutral surfaces. */
.card-grid{gap:1rem}.card{padding:1rem;background:#fff7ed;color:#431407;border:1px solid #fdba74}.card>*{margin:0}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* title, body, footer rows */
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherits the PARENT's row sizing */
}
/* Now every card's title, body, and footer align perfectly across the row,
   even if one card's title wraps to two lines */
  1. Three cards have intentionally different amounts of text.
  2. Subgrid allows their inner title, description and footer rows to share the parent’s track sizing.
  3. Compare footer alignment, then replace subgrid with ordinary independent rows to see the difference.
HTML used by this example
<div class="card-grid"><article class="card"><h3>A short title</h3><p>A description with additional text to make row alignment visible.</p><footer>Continue lesson</footer></article><article class="card"><h3>A much longer course title that wraps over several lines</h3><p>Short description.</p><footer>Continue lesson</footer></article><article class="card"><h3>Review</h3><p>A description with additional text to make row alignment visible.</p><footer>Continue lesson</footer></article></div>

Parameters and values

  • subgrid (value for grid-template-columns/rows): Inherits track sizing from the parent grid instead of defining new tracks

Best practices

  • Use subgrid specifically when nested elements need to align with the outer grid's tracks, like card components in a row that should share row heights
  • The nested element must still be a grid item itself (placed via grid-row/grid-column) before subgrid can inherit those specific tracks
  • Subgrid only inherits sizing for the axis you specify - use subgrid on both grid-template-columns and grid-template-rows if both need to align
  • This solves alignment problems that previously required JavaScript measurement or awkward fixed-height hacks

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading