css-subgrid

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

/* Parent: responsive wrapping grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 200px));
  justify-content: center;
  gap: 1rem;
}

/* Child: spans N rows and inherits parent row tracks */
.card {
  display: grid;
  grid-row: span 2; /* one per content section: icon + label = 2 */
  grid-template-rows: subgrid;
  justify-items: center;
  align-content: center;
  gap: 0.5rem;
}

How it works

1. Parent defines columns with auto-fill + minmax() for responsive wrapping
2. Parent does NOT need explicit grid-template-rows: implicit auto rows are created
3. Child uses grid-row: span N (N = number of content sections per card)
4. Child uses grid-template-rows: subgrid to inherit parent row tracks
5. All cards in the same visual row share track heights, so content aligns

Key Decisions

Column sizing: minmax(min, max) NOT minmax(min, 1fr)

Using 1fr as max stretches cards to fill available space, cards become too wide and look bad:

/* BAD: cards stretch to fill row */
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

/* GOOD: cards stay compact, max 200px */
grid-template-columns: repeat(auto-fill, minmax(140px, 200px));

Use justify-content: center on the parent to center the grid tracks.

auto-fill vs auto-fit

• auto-fill: creates as many tracks as fit, empty tracks remain (grid stays compact)
• auto-fit: collapses empty tracks, items stretch to fill (can cause unwanted stretching with 1fr)