CSS subgrid explained

The alignment gap subgrid fixes

A normal CSS Grid aligns direct grid items into rows and columns, but the alignment stops at the nesting boundary. If a grid item contains another grid, that inner grid creates its own independent track sizing, so two items deep inside different parent columns do not line up. Making them match historically meant fixing heights, repeating identical track lists, or reaching for JavaScript. Subgrid closes that gap.

subgrid is a value for grid-template-columns and grid-template-rows. Instead of defining new tracks, the nested grid inherits the track definitions from its parent and aligns against them. It is baseline widely available and supported in current versions of every major engine, so it is safe to use directly. It fits well with the reusable grid patterns used across modern layouts.

Inherit the parent's tracks

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card-inner {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

Here .card-inner spans all three parent columns and, instead of inventing its own column widths, uses subgrid to reuse the parent's three 1fr tracks. Anything placed inside .card-inner now lines up with the columns of the outer grid, exactly as if it were a direct item. The same works for rows with grid-template-rows: subgrid, which is how boxes of different content length keep footer-like rows aligned across a whole section. Gaps are inherited too, and you can override them; named line definitions from the parent are also passed down.

When it shines and caveats

The main payoff is a form alignment or a card grid where the sub-objects must share a rhythm with the outer grid, without duplicating track sizes or relying on fixed heights. Because the inner grid reuses parent tracks, content grows and the parent auto-sized rows still expand to fit, which keeps everything consistent.

Two caveats to plan around. First, a subgrid only spans the parent tracks it covers via its placement, so an inner grid that does not span the full width will not participate in all outer tracks. Second, if you need an implicit grid for rows (unknown number of rows), drop the rows: subgrid value and let grid-auto-rows drive that axis while keeping columns on subgrid. For browsers released before 2023, subgrid is unsupported, so a @supports fallback that reverts to a normal nested grid on those engines is a reasonable progressive-enhancement safety net; the responsive breakpoints article covers where that fallback interacts with viewport-based behaviour.