CSS Subgrid for aligning nested elements to parent grid tracks

In a grid of cards, content inside each card (like titles and descriptions) cannot align across cards without JavaScript measurement, because each card is its own formatting context.

Use subgrid to make a grid item's children participate in the parent grid's tracks:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* shared row tracks */
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3; /* occupy 3 rows */
  grid-template-rows: subgrid; /* inherit parent row tracks */
}

/* Now .card's children align to the parent grid's rows */
.card__image { grid-row: 1; }
.card__title { grid-row: 2; }
.card__body  { grid-row: 3; }

Without subgrid, each grid item is an independent layout context — its children cannot align with children in sibling items. Subgrid bridges this gap by propagating the parent's track definitions into the child grid.

Card grids or multi-column layouts where child elements need cross-card alignment.