I kept getting card grids where the CTA button floated at a different height on every card because each card is its own grid. The naive prompt ("responsive card grid with title, body, button") always gave me flex cards that only align by accident.
The fix was making the model use subgrid so the title/body/footer rows are shared across the whole track, plus banning the height hacks it loves to reach for. Now the footers align even when titles wrap to two lines.
Anyone found a cleaner fallback for browsers without subgrid than duplicating the layout in a @supports block?
Build a single-file responsive card grid in plain HTML + CSS. Hard requirements:
- Outer grid: `repeat(auto-fill, minmax(18rem, 1fr))`, gap from an 8px spacing scale only (4, 8, 12, 16, 24, 32px).
- Each card is a grid item that itself uses `grid-template-rows: subgrid` spanning 3 rows (media, content, footer) so titles, body, and the footer button align across ALL cards in a row.
- Do NOT use fixed heights, `min-height` hacks, JS measurement, or `margin-top: auto` inside flex to fake alignment.
- Provide a `@supports not (grid-template-rows: subgrid)` fallback that degrades to per-card flex, clearly commented.
- Focus-visible ring on the card's link, 2px offset, using `outline`, never removing outline without a replacement.
Output the full HTML file. Before the code, list which rows are shared by the subgrid and why.