A row of cards can have equal outer widths while their headings, descriptions and buttons refuse to line up. Making each card a separate grid does not automatically connect its internal tracks to those of its neighbours. Subgrid exists for cases where that shared alignment is intentional.
The MDN subgrid guide explains that a nested grid can use its parent’s tracks on the chosen axis instead of creating an independent track list. It can share columns, rows or both, depending on the layout.
Think in terms of the span first
Suppose a card spans three parent row tracks for a heading, body and action. Giving the card a row subgrid allows those internal pieces to participate in the corresponding shared tracks. A longer heading can then influence the heading row rather than pushing only that card’s button downward.
The essential idea can be expressed with a small rule set: the card is a grid container, it spans the appropriate parent rows, and its row template uses subgrid. Those declarations depend on a suitable parent grid and placement; copying the keyword onto an arbitrary element will not create the intended structure.
Test the content that usually breaks alignment
Use one short heading, one that wraps over several lines, and a card with a missing optional description. Check narrow widths, larger text and translated labels. Decide whether an empty area should remain aligned or whether that component should use a different layout. Shared sizing is a design decision, not a reason to force every card into identical content.
Keep the document order logical for reading and keyboard navigation. Visual alignment does not repair a confusing source order. Also check support in the browsers and embedded webviews your audience actually uses, and provide a usable fallback where required.
Subgrid is most helpful when the relationship between nested content and the parent is real. If each component should size itself independently, an ordinary nested grid may be simpler. Choose the behaviour you need before adding the feature, then verify the result with awkward content rather than a set of matching placeholders.