CSS Grid deep dive: a real responsive product grid with zero media queries

Part 11 built a real, fixed three-column grid. This part covers Grid's genuinely more powerful responsive pattern — one real declaration that reflows automatically across any viewport width, replacing what would otherwise need several explicit media query breakpoints.

The real, complete pattern

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

This single real line makes Bright Leaf Coffee's product grid genuinely responsive — as many columns as actually fit at a minimum of 240px each, automatically recalculated as the real viewport width changes, with zero media query anywhere in this rule.

minmax(): a real range, not a fixed size

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

minmax(240px, 1fr) tells each real column to be at least 240px wide, but allowed to grow up to an equal 1fr share of any leftover space. This is exactly what produces genuinely even columns that also never shrink below a real, usable minimum width — narrower than 240px, and a product card's image and text would start feeling cramped.

auto-fit vs. auto-fill: a real, subtle but genuine difference

/* auto-fit: empty tracks collapse, remaining items stretch to fill */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

/* auto-fill: empty tracks stay reserved, even if genuinely empty */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

A row with 2 real product cards, on a viewport wide enough for 4:

auto-fit:  the 2 cards stretch to fill the entire real row evenly
auto-fill: the 2 cards stay at 240px, with real empty, invisible
           track space reserved for 2 more that aren't there

For a real product grid where cards should genuinely fill available width when there are fewer of them, auto-fit is almost always the correct choice — auto-fill is a genuinely narrow case, useful specifically when preserving a consistent real track size matters more than filling the row, which is uncommon for a typical product grid.

Why this replaces several real media queries at once

/* the old, real, explicit-breakpoint way */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

The explicit-breakpoint version above works, but requires real, manual maintenance — adding a fifth real breakpoint for very wide screens means writing a fourth media query, and choosing the "right" breakpoint values requires genuine guesswork about real device widths. The auto-fit/minmax() pattern from the top of this part achieves equivalent (often better) responsive behavior with one real rule that adapts continuously, not just at a few fixed, chosen widths.

Combining Grid and Flexbox: a real, common, correct pattern

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

Grid and Flexbox aren't competing systems to choose between once and commit to everywhere — this is a genuinely common, correct real pattern: Grid arranges the overall real card layout, while Flexbox handles each individual card's internal, one-dimensional stacking of its image, title, and price. Reaching for whichever system's real strengths actually fit each specific layout problem, rather than forcing one system to handle everything, is the practical, real skill this pair of parts was building toward.

Next: positioning — static, relative, absolute, fixed, and sticky, building Bright Leaf Coffee's real sticky header.