Grid before and after subgrid

The classic Grid limitation was alignment across nested components. Parent defines columns; child component can't align to them. Every workaround was a hack: extra wrappers, display: contents, JavaScript measurements.

Subgrid changes this. A child grid can opt into the parent's track definitions:

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

.card {
  display: grid;
  grid-column: span 1;
  grid-template-rows: subgrid;
  grid-row: span 3; /* header, body, footer */
}

Now all card headers align. All footers align. Zero JavaScript.

Container queries change everything

Media queries respond to the viewport. Container queries respond to the parent element. This matters enormously for reusable components:

.sidebar-widget {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .sidebar-widget .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

The same component adapts to its context rather than the screen size. Design systems that used to require multiple component variants can collapse to one.

The part nobody writes about

The real shift is psychological. Grid used to feel like a workaround for CSS's layout model. In 2025 it feels like the layout model, with everything else building on top. That's a meaningful change.