Subgrid

Column subgrid — independent rows share the parent's columns

Each .row is its own grid with grid-template-columns: subgrid; its three cells align to the parent's 120pt 1fr 80pt tracks.

Item
Wireless keyboard
$49
SKU
A very long descriptive value that stretches the flexible middle column
$7
Total
Two line items
$56

Row subgrid — card bands align across the deck

Every .card spans the same three parent rows with grid-template-rows: subgrid, so the title, body and footer bands line up even though each card's body is a different length.

Starter
Everything you need to get going.
$0 / mo
Pro
A longer description that wraps onto several lines so this card's body band is the tallest of the three, and the shared row grows to fit it.
$12 / mo
Team
For groups.
$40 / mo