CSS Subgrid for Card Layouts

Overview

CSS Subgrid lets grid children inherit parent track sizing, so inner content (icons, labels, prices, CTAs) aligns across sibling cards without fixed heights or hacks.

When to Use

• Repeated card/tile components where inner elements must align horizontally across cards
• Icon + label grids where icons should share a row track
• Any layout where variable-length content in one card shouldn't break alignment with siblings

When NOT to use:

• Single-column layouts (no siblings to align with)
• Cards with identical fixed content heights (subgrid adds no value)

Core Pattern