Nested Grids and Complex Layouts

Grids Inside Grid Items

Any grid item can itself be turned into a grid container, letting a complex design be broken into an outer page-level grid and independent inner grids inside individual sections - each with its own column and row structure.

.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.feature-panel {
  grid-column: span 2; /* this panel takes up two of the outer columns */
  display: grid;       /* and becomes its own grid internally */
  grid-template-columns: 1fr 1fr;
}

Spanning Multiple Rows and Columns

.hero {
  grid-column: 1 / 3; /* spans from line 1 to line 3 */
  grid-row: 1 / 3;
}
/* or, using the span keyword */
.hero {
  grid-column: span 2;
  grid-row: span 2;
}

Spanning multiple tracks is how a single featured item - a large hero image, a highlighted card - can take up more visual space than its siblings within the same grid.

Combining Named Areas with Nested Grids

A common real pattern is to lay out the page skeleton with grid-template-areas, then give the "main content" area its own internal grid for a card layout - keeping the outer structure simple to read while still allowing rich internal layout.

Knowing When to Stop Nesting

Nested grids are powerful, but each additional layer adds a place where alignment can drift, especially before subgrid support is considered. For most designs, one outer grid plus a small number of independent inner grids is enough - avoid nesting purely for the sake of it.