CSS Grid normally creates an independent track system for every grid container. That isolation is useful until nested components need to align with columns or rows defined by an ancestor. subgrid lets a nested grid reuse those tracks instead of guessing their sizes.

Modern evergreen browsers support subgrid, making it practical for production layouts where cross-component alignment matters.

The problem with independent nested grids

Consider a product list where every card contains a title, description, price, and action. If each card uses its own rows, the buttons move vertically when descriptions have different lengths.

A parent grid can define shared row tracks, but descendants do not inherit them automatically.

Reuse parent rows with subgrid

<section class="cards">
  <article class="card">
    <h2>Starter</h2>
    <p>For small projects.</p>
    <strong>$12</strong>
    <button>Choose plan</button>
  </article>
  <article class="card">
    <h2>Team</h2>
    <p>Collaboration features for growing engineering teams.</p>
    <strong>$29</strong>
    <button>Choose plan</button>
  </article>
</section>
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-auto-rows: auto;
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0;
}

The card spans four parent row tracks and adopts them as its own. Corresponding content can therefore align across cards.

Subgrid can also reuse columns:

.form-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
}

.field-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

This is useful when labels and controls inside nested wrappers must align with the outer form.

Understand what is inherited

grid-template-columns: subgrid reuses the ancestor’s column tracks for the area the child spans. It does not copy every grid property. The child can still place its own items and can use its own alignment rules.

Line names from the parent are available to the subgrid, and a subgrid can add local line names. This makes named layouts easier to maintain than repeating numeric track sizes.

Prefer subgrid over duplicated measurements

Without subgrid, developers often repeat declarations such as grid-template-columns: 12rem 1fr in multiple components. That creates hidden coupling: changing the outer layout requires finding every duplicate definition.

Subgrid makes the dependency explicit. The nested component says that its tracks belong to the ancestor’s layout system.

Trade-offs

Subgrid is not appropriate when a component should remain completely portable. A reusable widget that can appear anywhere may be easier to reason about with an independent grid.

It also requires the child to participate in a parent grid and span the tracks it intends to inherit. Deeply nested markup may need an intermediate wrapper to become a grid item before it can use subgrid.

Common pitfalls

Forgetting to span enough tracks

A subgrid only receives tracks covered by its grid area. If a child spans one row, it cannot expose four inherited rows to its descendants.

Replacing semantic markup for alignment

Do not flatten meaningful HTML solely to make grid placement easier. Subgrid exists partly to preserve useful wrappers while maintaining alignment.

Assuming gaps behave like extra tracks

Gaps belong to the grid layout but are not addressable grid tracks. Test nested backgrounds and borders carefully when a subgrid crosses gaps.

Using subgrid everywhere

Independent grids remain simpler for many components. Reach for subgrid when nested content genuinely needs to align with an ancestor.

Keep alignment ownership clear

A maintainable grid has one place that owns major track sizing. Descendants that must participate in that alignment can opt into subgrid; components that do not need it stay independent. This reduces duplicated measurements while keeping responsive layouts easier to change.

CSS CSS Grid Subgrid Responsive Design