Your CSS Grid cards look misaligned. `subgrid` is the fix you didn't know existed.

Here is a layout I have built more times than I can count.

You have a row of cards in a CSS Grid. Each card has a header, a body with variable-length content, and a footer with a button. The card with three lines of copy has its button sitting higher than the card with one line. You want all the footer buttons to sit on the same horizontal line.

So you try the usual fixes. You add flex: 1 to the body so it pushes the footer down. It pushes the footer to the bottom of its own card, but each card is a different height, so the buttons still don't align. You try a fixed height on the body. It works until someone adds a sentence of copy and the text overflows. You write four lines of JavaScript — querySelectorAll, getBoundingClientRect, find the max, set minHeight on each — and add a ResizeObserver to re-run it when the viewport changes.

That last approach works. It is also the wrong tool for a layout problem.

The real problem is structural: CSS Grid controls only direct children. Your card elements can participate in the outer grid's columns. But the content sections inside the cards — the header, body, footer — can't. Each card is its own formatting context, blind to the parent grid's row tracks.