Resolved

CSS Grid creates uneven spacing with variable height cards

CSS
Frontend
Astro
Grid Layout
Responsive Design
UI/UX
Debugging

Using `grid-auto-rows: 1fr` in CSS Grid caused inconsistent vertical gaps between cards with variable content heights | Fixed by switching to `grid-auto-rows: auto` for content-driven row sizing

Issue

Variable-height cards in the Astro-based card layout exhibited inconsistent vertical spacing across responsive breakpoints. On mobile (single-column) and desktop (two-column offset) views, gaps between cards fluctuated between 1rem and 3–5rem without a discernible pattern. The issue stemmed from a mismatch between grid-auto-rows: 1fr and cards with fixed min-height: 11rem but varying content lengths, unlike the consistently formatted /work page.

Culprit

The root cause was a race condition between CSS Grid’s grid-auto-rows: 1fr behavior and variable-content heights:

  1. Grid enforced the height of the tallest card (e.g., 18rem) across all rows.
  2. Shorter cards (11rem content) received disproportionate extra vertical space, appearing as irregular gaps.
  3. This created visual imbalance, as the uniform 1rem gap intended for spacing became erratic (e.g., 1rem, 8rem, 6rem).

Solution

To resolve this, the grid-auto-rows property was modified in the Grid.astro component:

  • Before: grid-auto-rows: 1fr forced all rows to match the tallest card’s height, causing inconsistent gaps.
  • After: Replaced with grid-auto-rows: auto to let each row size dynamically based on its content.

Resulting improvements:

  • Spacing consistency: The gap: 1rem now applies uniformly across all cards.
  • Responsive behavior: Fixed visual imbalance in both mobile (single-column) and desktop (two-column) layouts.
  • Content flexibility: Cards with min-height: 11rem can grow naturally while maintaining even spacing.

Alternative approaches like minmax(11rem, auto) were considered but rejected to prioritize pure content-driven sizing over enforced minimum heights.