Subgrid

Subgrid lets a child grid inherit column tracks or row tracks from its parent grid. This solves alignment problems that used to require duplicated grid definitions.

The Main Idea

A parent sets the grid structure. A child can then say it wants to use the same tracks.

.page {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: 1rem;
}

.card-list {
  display: grid;
  grid-column: 2 / 4;
  grid-template-columns: subgrid;
}

This keeps nested content aligned with the parent columns instead of inventing a separate grid that may drift out of sync.

Good Use Cases

• editorial or magazine layouts
• dashboards with consistent column rhythm
• nested card sections inside larger grid shells
• form layouts with repeated label and field alignment

Why Subgrid Is Useful

• alignment stays consistent across nested components
• you avoid repeating column values in many places
• layout updates become easier because one parent grid controls more of the structure

Best Practices

• use subgrid when visual alignment matters across levels
• avoid overcomplicating layouts that do not benefit from shared tracks
• combine with container queries and design tokens for strong reusable systems

Next Step

Continue to Design Systems with CSS to connect tokens, components, and layout primitives into a scalable frontend system.