What does subgrid actually inherit?

A subgrid adopts the track sizing of the parent grid lines covered by the nested item's placement. The child element does not define its own track sizes on that axis; instead its rows or columns line up exactly with the parent's, so content across nested grids aligns.

Can I use subgrid on one axis only?

Yes. grid-template-columns: subgrid uses parent columns while rows are still defined locally (or vice versa). Set subgrid on both grid-template-columns and grid-template-rows to inherit both axes. Any axis not set to subgrid behaves as an ordinary independent grid axis.

How do gaps work with subgrid?

By default the subgrid inherits the parent's gap on the subgridded axis so tracks stay aligned. You can override it by setting column-gap or row-gap on the subgrid, but a different gap will shift its tracks out of alignment with the parent on that axis.

Can a subgrid add its own line names?

Yes. After the subgrid keyword you may list bracketed line names, e.g. subgrid [start] [mid] [end]. These names are added to the inherited lines for use within the subgrid, without replacing the parent's names.

Is subgrid widely supported?

Subgrid shipped in all major evergreen browsers (Firefox first in 2019, then Safari and Chromium in 2023). For older browsers you need a fallback, since subgrid degrades to an ordinary independent grid that will not align with the parent.

CSS Subgrid Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Aligning nested grids with subgrid

By default a nested CSS grid defines its own tracks, so its rows and columns do not line up with the outer grid. The subgrid value makes a nested grid adopt the parent’s grid lines on a chosen axis, so deeply nested content aligns to one shared track structure. This reference covers the syntax and inheritance rules.

How it works

Set display: grid on the child, then set grid-template-columns: subgrid and/or grid-template-rows: subgrid. The child must itself be a grid item; the parent lines it inherits are exactly the ones its placement spans:

.parent {
  display: grid;
  grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d];
  gap: 1rem;
}
.child {
  grid-column: a / d;   /* spans all three parent columns */
  display: grid;
  grid-template-columns: subgrid;  /* adopts a / b / c / d */
}

The child’s columns now align pixel-for-pixel with the parent’s, inheriting the named lines a–d and the 1rem gap. You can append your own names — subgrid [start] [mid] — and override column-gap/row-gap if you accept the resulting misalignment.

Tips and notes

Subgrid only mirrors the tracks the item spans — placement controls extent.
Inherited line names let you write grid-column: a / b inside the subgrid.
Both axes can be subgrid; mix subgrid on one axis with normal tracks on the other.
Provide a non-subgrid fallback for legacy browsers, as it degrades silently.