How to Build a Responsive Layout with CSS Grid

Set display: grid on the parent. Nothing moves yet — all children still stack vertically, because you have not defined any columns. This is your starting point.

This is where Grid earns its reputation. The declaration below creates as many columns as will fit, each at least 260px wide, sharing leftover space equally. Add or remove cards — the grid reflows automatically, zero media queries.

gap is the modern shorthand for row-gap and column-gap. It sets gutters between tracks — not on the outer edges. No more negative margins or :last-child hacks.

For page-level layouts (header, sidebar, main content, footer), named areas make the structure self-documenting. The visual ASCII diagram in your CSS is exactly how the layout renders.

A featured card or a banner that should occupy more horizontal space can span multiple columns with a single declaration. Use -1 as the end line to stretch all the way to the last column, regardless of how many columns the grid has.

auto-fit + minmax handles most responsive needs automatically. Only add a media query when the layout itself needs to change structurally — for example, collapsing the sidebar on small screens.

Open DevTools, click the Elements tab, and find your grid container. A small grid badge appears next to it. Click the badge to overlay the grid lines directly on the page — column numbers, row numbers, area names, and gap sizes all rendered visually. This is the fastest way to diagnose misaligned items.