CSS Subgrid Explained: The Missing Link/Grid

For years, CSS Grid had a fatal flaw: nested grids didn't know about the parent grid. If you had a card inside a grid, the card's internals couldn't align with the main page layout.

Subgrid fixes this.

The Problem

Imagine a list of cards. Each card has a title, content, and footer. You want all the "titles" to lineup horizontally, and all the "footers" to align at the bottom, even if the content length varies.

Without subgrid, this is a nightmare requiring fixed heights or JavaScript.

The Solution: grid-template-rows: subgrid

/* 1. Parent Grid */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 2. The Card (Child of Grid) */
.card {
  display: grid;
  /* Span 3 rows internally: Title, Content, Footer */
  grid-row: span 3; 
  
  /* INHERIT THE ROWS from the parent context! */
  grid-template-rows: subgrid; 
}

Now, the explicit rows defined in .card-list (or implicit ones) are passed down. If Card A has a massive title, the "Title Row" expands for All Cards, keeping alignment perfect.

Browser Support

As of 2026, Subgrid is supported in all major browsers (Chrome, Firefox, Safari). There is no reason not to use it.

Conceptual Model

Think of subgrid as "transparent layout". It allows the grandchild elements to participate in the grandparent's layout logic.

1. Columns: grid-template-columns: subgrid inherits column tracks.
2. Rows: grid-template-rows: subgrid inherits row tracks.
3. Gap: Inherits the gap unless overridden.

Test Your Knowledge

Conclusion

Subgrid is critical for "Card Layouts" where internal alignment (header/body/footer) matters across siblings. It is the final piece of the CSS Layout puzzle.