Responsive Grid Patterns

The killer feature of CSS Grid for real products: card grids that adapt from one to four columns without a single media query. This chapter covers auto-fit, minmax(), named template areas for page shells, and when breakpoints are still worth adding.

The magic one-liner

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

Expected output:

• Phone (~360 px): 1 column of full width.
• Tablet (~768 px): 2 columns.
• Laptop (~1280 px): 4 columns… however many fit.

The browser measures the container and fits as many 260 px-minimum columns as possible; each stretches to an equal share. No breakpoints, no guessing device widths.

auto-fit vs auto-fill

Rule of thumb: content grids → auto-fit; fixed card sizes → auto-fill.

Page shells with grid-template-areas

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas:
    "nav    header"
    "nav    main"
    "footer footer";
  min-height: 100svh;
  gap: 1rem;
}
.page-header { grid-area: header; }
.page-nav    { grid-area: nav; }
.page-main   { grid-area: main; min-width: 0; }
.page-footer { grid-area: footer; }

Named areas make layout self-documenting — you can literally see the shape of the page in the CSS. Expected output: navigation down the left spanning both rows, header and content on the right, footer full-width underneath.

Making the shell responsive

@media (max-width: 800px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

Spanning patterns

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.wide   { grid-column: span 2; }     /* half row */
.full   { grid-column: 1 / -1; }     /* whole row */

@media (max-width: 640px) {
  .wide { grid-column: span 1; }     /* stack on phones */
}

Explicit rows only when needed

/* Masonry-ish uniform grid */
.grid { grid-auto-rows: 220px; }

/* Variable content that must not clip */
.grid { grid-auto-rows: minmax(180px, auto); }

For true masonry (uneven heights packing tightly), CSS still has no native solution — accept equal rows or use a small JS library.

When you still need media queries

• Changing the structure (sidebar below content on phones).
• Type scale steps (bigger headings on bigger screens).
• Density: gutters and padding often grow with the viewport.
• Interaction mode: hover-only affordances need touch fallbacks.

Breakpoint strategy and syntax are the next chapter: Responsive Design & Media Queries.

Common mistakes

• minmax(0, …) forgotten in text grids — long words/tokens expand the track and cause horizontal scrolling (the exact bug class fixed on this site).
• minmax too small — minmax(120px, 1fr) crams 6 columns onto a phone; 240–320 px is a sane floor for cards.
• Fixed pixel containers — grids inside a width: 1200px div still overflow smaller screens; use max-width + percentages.
• Grid areas without a mobile version — always define the stacked shape.

Practice checklist

1. Build a 6-card grid with auto-fit/minmax(260px, 1fr) — resize the browser and count columns.
2. Swap auto-fit for auto-fill with 2 items and note the difference.
3. Recreate your site's header/sidebar/footer as a template-areas shell, then stack it at 800 px.

Grid sizes everything in pixels — but pixels are not always the right unit. Next: CSS Units & Values.