CSS Subgrid

ELI5 — The Vibe Check

CSS Subgrid lets a grid child inherit the grid tracks from its parent, so nested elements can align to the outer grid. It's like a kid inheriting their parent's ruler marks — everything lines up perfectly across nesting levels. Grid alignment nerds are crying tears of joy.

Real Talk

CSS Subgrid is a value for grid-template-columns or grid-template-rows that allows a grid item's children to participate in the parent's grid. This enables consistent alignment across nested grid containers without duplicating track definitions, solving common card layout alignment issues.

Show Me The Code

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

When You'll Hear This

"Subgrid finally lets us align card headers and footers across a row" / "Without subgrid, you'd need JavaScript to make nested grid items line up"