auto-fit + minmax: responsive grids, zero media queries

The most important Grid feature

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

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

• repeat(auto-fit, …) — fit AS MANY tracks as possible into the container.
• minmax(280px, 1fr) — each track is at LEAST 280px, otherwise grow to fill.

Container is 1200px wide → 4 tracks of 300px each. Resize to 900px → 3 tracks of 300px. Resize to 600px → 2 tracks of 300px. Resize to 400px → 1 track of 400px.

The grid REFLOWS automatically. One line of CSS replaces several media queries.

auto-fit vs auto-fill

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

• auto-fit — when there's extra space, expand tracks to fill it (no empty columns).
• auto-fill — when there's extra space, create empty tracks (preserve column count).

Most of the time you want auto-fit. auto-fill is useful when you want consistent column widths across pages with different item counts.

What this replaces

Pre-grid responsive card grids needed:

.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 280px; }
@media (max-width: 600px) { .card { flex: 1 1 100%; } }

The grid version is shorter AND handles the edge cases (vertical alignment across rows) that flex-wrap doesn't.