Nested Layout Revolution

Previously, if you had a nested element (e.g., a card inside a grid), it " knew " nothing about its parent's grid. subgrid changes the game rules.

What's the Problem?

Imagine 3 cards in a row. Each has a header of different length. You want all headers to be the same height, adjusting to the longest one. Without subgrid, this was almost impossible.

Solution:

.card {
  display: grid;
  grid-template-rows: subgrid; /* Card 'steals' grid lines from parent container */
  grid-row: span 3; /* Card occupies 3 rows of parent grid */
}