Subgrid in CSS

A child grid that borrows its parent's tracks, so cards line up across their insides.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 0.5rem;
}

.card h3 { margin: 0; }
.card footer { align-self: end; }

How it works

1. grid-template-rows: subgrid adopts the parent's row lines.
2. Every card's title, body and footer then share one baseline.
3. The child still spans the rows you give it in the parent.

Keywords and builtins used here

• card
• cards
• display
• gap
• grid
• margin
• minmax
• rem
• repeat

The run, in numbers

Lines

16

Characters to type

277

Tokens

77

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 58 seconds.

Type this snippet

Step 7 of 7 in Grid, step 13 of 24 in Flexbox & grid.

← Previous Next →