Subgrid

Subgrid allows a nested grid to adopt the track sizing of its parent grid. This solves the classic alignment problem where items inside nested grids couldn't align with items in the parent. sdfsdfs

subgridgrid-template-columns: subgridgrid-template-rows: subgrid

1. The Problem Subgrid Solves

Without subgrid, if you have cards in a grid, internal elements inside each card can't align across cards — each card has its own independent coordinate system.

CSS

/* Without subgrid — titles can't align across cards */
.grid { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  /* or display: grid, but with its own rows */
  /* internal elements align within card, */
  /* NOT across cards in the parent grid   */
}
Short title
A longer description that wraps onto multiple lines in the card body area.
CTA Button
A Much Longer Card Title That Wraps
Short body.
CTA Button
Medium Title
Medium length body text that also wraps a bit.
CTA Button
Notice how the titles, bodies, and buttons are NOT aligned across the three cards — because each card manages its own layout independently.

2. Subgrid — Inherit Parent Tracks

With subgrid, a nested grid item can inherit its parent's column or row tracks. Items inside the nested grid participate in the parent grid — enabling cross-card alignment.

CSS

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

.card {
  display: grid;
  grid-row: span 3;   /* span 3 parent rows */
  grid-template-rows: subgrid; /* adopt parent rows! */
  gap: 8px;
}
/* Now card children align across all cards */
Short title
A longer description that wraps onto multiple lines in the card body area.
CTA Button
A Much Longer Card Title That Wraps Nicely
Short body.
CTA Button
Medium Title
Medium length body text too.
CTA Button
Now titles align, bodies align, and CTAs align across all cards — even though titles have different heights. This is the #1 use case for subgrid.

3. Subgrid on Columns

You can also apply subgrid to columns. A nested grid item that spans multiple columns can let its children align to the parent column lines.

CSS

.grid {
  grid-template-columns: repeat(4, 1fr);
}

.subgrid-item {
  grid-column: 1 / -1;            /* span all columns */
  display: grid;
  grid-template-columns: subgrid;  /* adopt parent cols */
}

/* children align to parent grid columns */
.child-b { grid-column: span 2; }
1
2
3
4
child A
col 1
child B spans 2 parent cols
child C
col 4

4. Subgrid for Both Axes

You can use subgrid for both columns AND rows simultaneously. The nested grid becomes a window into the parent grid's coordinate system.

CSS

.parent {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px 50px 50px;
}

.nested {
  grid-column: 2 / 4;           /* span 2 parent cols */
  grid-row: 2 / 4;              /* span 2 parent rows */
  display: grid;
  grid-template-columns: subgrid; /* inherit 2 cols */
  grid-template-rows: subgrid;    /* inherit 2 rows */
}
1
2
3
sub A
sub B
sub C
sub D
7
Browser support: subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). Check caniuse.com for current support.