A card containing a title, body and footer will not align its rows with the card beside it, because each card is its own grid and knows nothing about its siblings. Subgrid solves this and is not implemented anywhere yet.
/* today: put the parts on the parent grid, not on a per-card grid */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
}
.card__title { grid-row: 1; }
.card__body { grid-row: 2; }
.card__footer { grid-row: 3; }
That means the card cannot be a single element, which is a real cost — it breaks the component boundary and makes the markup harder to move. The alternative is fixing the heights, which is worse. It is worth writing down as a known limitation rather than fighting, because the specification exists and browsers will catch up.