Snippets /
Subgrid layout
Cards with perfectly aligned rows — no fixed heights, no JavaScript.
Layout
Container queries
Components that respond to the space they're given, not the viewport. Works in sidebars, modals, and main columns equally.
Animation
Scroll-driven animations — the full guide
No more reading scrollY in JS. One keyframe, zero event listeners.
Color
OKLCH
Perceptually uniform color that stays consistent across light and dark modes, display profiles, and opacity values. A better starting point than hex.
Quick implementation
/* Parent: define the column layout AND explicit row tracks */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 4 rows: eyebrow | title | body | footer */
grid-template-rows: auto auto 1fr auto;
gap: 1rem;
}
/* Each card participates in the parent's row tracks */
.card {
display: grid;
grid-template-rows: subgrid; /* ← the magic */
grid-row: span 4; /* span all 4 row tracks */
padding: 1rem;
/* gap: 0 on the card so padding controls spacing,
not the subgrid gap */
}
/* Children automatically align to parent row tracks */
.card .eyebrow { /* row 1 */ }
.card h4 { /* row 2 */ }
.card p { /* row 3 — stretches to fill */ }
.card footer { /* row 4 — always at the bottom */ }Prompt this to your LLM
Includes the 4-row pattern and a column-axis subgrid variant.
You are a senior frontend engineer.
Goal: Build a card grid where content rows (eyebrow, title, body, footer) align perfectly across all cards — using CSS subgrid, no fixed heights.
Technical constraints:
- Parent grid: display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto (4 explicit row tracks: eyebrow, title, body, footer). Set gap on parent.
- Each card: display: grid; grid-template-rows: subgrid; grid-row: span 4. This makes the card's 4 children participate in the parent's 4 row tracks.
- The body row uses 1fr so it stretches — titles and footers align even when body copy is different lengths.
- Use gap: 0 on the card and control internal spacing with padding/margin on children.
Bonus variant (column subgrid):
- Show how subgrid can also align columns: a definition list or a 2-column form where labels and inputs align across multiple form rows.
Framework variant (pick one):
A) Vanilla HTML + CSS — a 3-card grid.
B) React component — CardGrid + Card components. Card accepts eyebrow, title, body, footer (ReactNode) props.
Edge cases:
- Fallback: if subgrid is unsupported, cards just size to their content (no alignment). That's acceptable.
- grid-row: span N must match the number of explicit row tracks on the parent.
Return full HTML + CSS.Why this matters in 2026
The classic card grid problem: three cards, different amounts of text, misaligned titles and footers. The old solutions were JavaScript to equalize heights, fixed min-height values, or display: flex; flex-direction: column with margin-top: auto on the footer — all workarounds. Subgrid solves it at the layout level: the card's rows participate in the parent's rows, so alignment is structural, not patched.
The logic
The parent grid defines explicit row tracks — e.g. grid-template-rows: auto auto 1fr auto for eyebrow, title, body, footer. Each card spans those four rows with grid-row: span 4 and sets grid-template-rows: subgrid. The card's four children each occupy one of the parent's row tracks. The tallest content in any row track in any column determines that track's height — so all titles sit at the same vertical position, and all footers sit flush at the bottom.
Accessibility & performance
Subgrid is pure layout — no a11y impact. Ensure heading order is logical (e.g. h3 inside cards inside an h2 section). No script required; the browser handles all alignment natively.