Component Deep Dive #14: Card Grid Layout — 4 Lines of CSS, Zero Media Queries

Most developers still use CSS Grid for basic two-column layouts. Here's the magic formula for adaptive card grids:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

That's it. From 1200px to 320px, columns auto-adjust from 4 to 1 — zero @media queries required.

auto-fill vs auto-fit

• auto-fill: preserves empty tracks, keeping last-row cards the same width
• auto-fit: collapses empty tracks, stretching remaining cards

For card grids, use auto-fill. auto-fit makes the last row look broken when cards don't fill it.

Equal Height, Free

Grid items in the same row are automatically equal height — no extra CSS needed. Even if one card has 3 lines of text and another has 10, they'll align perfectly.

---

This component is part of Web Component Dictionary v2.0 — 83 components, one-time ¥9.99.
Live demo: wdsega.github.io/web-components