subgrid in CSS: when a child borrows its parent's grid

A grid item can become a grid container itself, but by default it then creates columns and rows that are completely independent from its parent's, with no connection between the two. This becomes a real problem the moment you want to align content across several cards on the same vertical grid, a title, a description, a price, lined up from one card to the next even when the text lengths differ.

subgrid solves exactly that case: instead of creating its own independent grid, a child can inherit the tracks already defined by the parent's CSS Grid, and align itself directly to them.

Definition

subgrid is a value of grid-template-columns and grid-template-rows that makes an element inherit the tracks, the rows and columns already laid out, of its parent's grid, instead of creating new independent ones. A subgrid child first needs to be positioned across several of the parent's tracks with grid-column and grid-row, otherwise there is nothing to inherit: subgrid only works over the span of tracks the element already occupies in the parent grid.

Syntax

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  gap: 16px;
}

Here, .card spans three columns of the parent thanks to span 3, then grid-template-columns: subgrid makes it reuse exactly those three columns as its own tracks, instead of calculating new ones from its own content. Any future change to grid-template-columns on the parent automatically carries over to the child, without touching its own CSS at all.

The most common use case: aligning uneven cards

A grid of cards, each with a title, a description, and a price of different heights, runs into a classic problem: without subgrid, each card aligns its own content independently of the others, and prices for example never land at the same height from one card to the next. With subgrid, each card inherits the rows of the parent grid, which automatically lines up title with title, description with description, price with price, no matter how long the text is in each card.

subgrid versus an independent grid

subgrid can be inherited further down too

An element using subgrid can in turn have a child that inherits its own tracks with a second subgrid, propagating the grandparent's alignment down to a deeper descendant in the HTML. This case stays rare in practice, but it shows that subgrid is not limited to a single generation of children: the inheritance chain can keep going as long as each level stays positioned on the tracks of the level above it.

A trap worth knowing: gap does not inherit automatically

subgrid inherits the parent's tracks, but not its gap, which remains a separate property and needs to be redeclared on the child if it should match the parent's.

Frequently asked questions

Yes, all modern browsers support it by now, with Safari being the last to add it after Firefox and Chrome. On a project that still needs to support older browser versions, it is still worth checking the exact compatibility target before relying on it as your only alignment solution.

Yes, grid-template-columns: subgrid and grid-template-rows: subgrid apply independently of one another. A child can perfectly well inherit the parent's columns while keeping its own rows calculated normally, depending on what the layout actually requires.

No, the two serve different needs. An independent grid remains the right choice when the child's content has no reason to align with the parent. subgrid is only useful in the specific case where that alignment between parent and child is exactly what you are trying to achieve.