CSS Subgrid

Introduction

CSS Subgrid lets a child grid item adopt its parent's tracks, so nested content aligns to the outer grid. Before subgrid, you'd manually duplicate track sizes or use workarounds.

Classic example: cards where titles, bodies, and footers align across cards even with different content lengths.

Subgrid is the missing piece that makes CSS Grid truly composable.

Key Concepts

Basic Subgrid

css

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

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

Column Subgrid

css

.page {
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] minmax(0, 60ch) [content-end] 1fr [full-end];
}

.section {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
}

.section > p { grid-column: content; }

Practical Examples

1. Aligned Card Grid

css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}
.card__header { align-self: start; }
.card__footer { align-self: end; }

2. Form Layout

css

.form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1rem;
}

.form-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

3. Full-Bleed Layout

css

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100% - 2rem)
    [content-end] minmax(1rem, 1fr) [full-end];
}
.page > * { grid-column: content; }
.page > .full-bleed {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
}

Best Practices

Use grid-row: span N to define track occupation.
Subgrid inherits parent gap — override if needed.
Combine with named grid lines.
Start with row subgrid for card alignment.
Test with varying content lengths.

Common Pitfalls

Forgetting grid-row: span N — nothing aligns.
Using subgrid on a non-grid-item.
Not accounting for parent gap inheritance.
Subgrid can't be used with auto-fill/auto-fit on the child.

Browser Support

Chrome 117+, Safari 16+, Firefox 71+ (first!), Edge 117+. ~90% support.

CSS Grid Best Practices — master grid first
CSS Flexbox Guide — when flex beats subgrid
CSS Container Queries — combine with subgrid