Aligning Nested Layouts With CSS Subgrid

A nested CSS grid normally creates its own tracks. That is fine until its children need to line up with content in the parent grid. subgrid solves that specific problem by reusing the parent’s tracks.

Consider a parent with three columns:

<div class="grid-container">
  <div class="grid-item subgrid-container">
    <!-- Subgrid items here -->
  </div>
</div>

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

.subgrid-container {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: subgrid;
}

The inner grid does not define a new set of column sizes. It uses the column tracks available where it sits in the parent grid.

Where subgrid is genuinely useful

Cards are a good example. Each card can be a grid item and also a grid container, while its title, description, and footer align with the same rows as the neighbouring cards. Without subgrid, those internal rows are independent, so content of different lengths pushes everything out of alignment.

You can inherit rows, columns, or both:

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

The parent must already define the relevant tracks, and the subgrid must span them. That second detail is easy to miss when the result does not look like a grid at all.

Subgrid can also use the parent’s gaps, though you can override the gap on the subgrid when needed. I usually keep them consistent unless the design gives me a reason not to.

For a nested layout that does not need to align with anything outside itself, a normal grid is simpler. subgrid is not a replacement for Grid; it is the part you reach for when independent nested tracks are precisely the problem.