Why CSS Subgrid is a Game Changer

For years, CSS Grid has been powerful, but it had one flaw: nested elements couldn't easily align to the parent grid tracks. Subgrid changes everything.

The Problem

Imagine a card layout where every card has a title, an image, and a footer. You want all the titles to align horizontally, even if one title is longer than the others. With standard Grid or Flexbox, this required rigid height settings or JavaScript hacks.

The Solution: grid-template-rows: subgrid;

With subgrid, the child element (the card) can inherit the track definition of its parent (the container). This means the internal components of the card can snap to the global rows defined on the container.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* Header, Body, Footer */
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Magic! */
}

Browser Support

As of 2026, Subgrid is supported in all major evergreen browsers. It's time to start using it in production.