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.

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.

Live Demo

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

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   */
}

💡 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.

Live Demo

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

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 */

💡 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.

Live Demo

child A
col 1

child B spans 2 parent cols

child C
col 4

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; }

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.

Live Demo

sub A

sub B

sub C

sub D

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 */
}

💡 Browser support: subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). Check caniuse.com for current support.