Auto-fit grid: the responsive card row without breakpoints

You saw this in B3 — now apply it as the default responsive layout

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

That's a fully responsive card grid. NO media queries:

• Desktop (1200px): 5 cards × 240px.
• Tablet (800px): 3 cards × 270px.
• Phone (375px): 1 card × 375px.

The grid reflows automatically. The minimum (240px) prevents cards from squishing too narrow; the 1fr lets them stretch to fill.

When to use auto-fit vs auto-fill

• auto-fit — empty space collapses; tracks GROW to fill.
• auto-fill — empty space stays; tracks keep their minmax width.

Most card grids want auto-fit (no awkward empty columns on wide screens).

When breakpoints are still useful

For DRAMATIC layout shifts (sidebar disappears entirely on mobile, hamburger menu appears), media queries make sense:

.layout { display: grid; grid-template-columns: 240px 1fr; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }

For PROPORTIONAL adjustments (card sizes, padding, font), use clamp + auto-fit.

Rule of thumb

If you can describe the change as "scale this number up", use clamp. If "rearrange these elements", use breakpoint. Most projects need 1-2 breakpoints total.