Basic subgrid
Child inherits parent tracks — titles and text align across cards.
Short title
Description text that varies in length.
A longer card title across two lines
More text here.
Medium title
Titles align horizontally across all three cards thanks to subgrid.
Quick implementation
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* image, title, description */
background: oklch(0.19 0.02 260);
border: 1px solid oklch(0.25 0.02 260);
border-radius: 0.5rem;
overflow: hidden;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building an aligned card grid.
Goal: A card grid where titles, images, and descriptions align horizontally across cards using CSS subgrid — no JavaScript.
Technical constraints:
- Parent grid: repeat(3, 1fr) columns.
- Each card: display: grid; grid-template-rows: subgrid; grid-row: span 3.
- The span count must match the number of content sections per card.
- Use oklch() for all colors, not hex or rgba().
- Cards must have consistent border-radius and overflow: hidden.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept an array of card data with image, title, description.
Edge cases to handle:
- Cards with varying title lengths should still align — subgrid handles this.
- On narrow viewports, collapse to 1 or 2 columns and subgrid gracefully degrades.
- Fallback for browsers without subgrid: Chrome 117+, Safari 16+, Firefox 71+.
Return HTML + CSS.Why this matters in 2026
Card grids are everywhere, but aligning titles and descriptions across cards with different content lengths was historically impossible without JavaScript or fixed heights. subgrid solves this: child elements participate in the parent's row tracks, so a tall title in one card pushes the title row taller for all siblings.
The logic
grid-template-rows: subgrid tells the card to use the parent grid's row tracks instead of creating its own. grid-row: span 3 tells the parent that each card occupies three row tracks — one per content section (image, title, description). The parent grid sizes each row to fit the tallest content across all cards in that row, keeping everything aligned.
Accessibility & performance
Subgrid is handled entirely by the CSS layout engine — no runtime overhead. The DOM remains flat and semantic. Screen readers process cards in source order regardless of visual alignment. For browsers without subgrid support, the card falls back to a standard grid with independently-sized rows — functional but not perfectly aligned.