Layout & grids

In one line: a grid is a shared coordinate system of columns and gutters that every element snaps to, so a screen full of scattered boxes resolves into one deliberate, aligned layout.

What it is

A grid divides a container into a set of vertical columns separated by gutters (the consistent gaps between them). In CSS Grid those columns are tracks — sized slots that the grid lays children into in order. You describe the tracks once with grid-template-columns, set the gap once with gap, and every child lands on the same lines.

Grid and flexbox are not rivals. Flexbox lays content out along one axis (a row or a column that wraps); CSS Grid is for two-dimensional layout — rows and columns at the same time, where you want children to align on a shared set of lines in both directions.

Why it matters

Without a grid, every element carries its own ad-hoc width and offset, and the eye reads the resulting misalignment as noise — the same "feels off but I can't say why" that ad-hoc spacing produces, one level up. A grid replaces all of those independent decisions with a single system: align to the columns, and everything relates.

It also makes layout responsive for free. Because the grid owns the column math, you can let the same markup go from one column on a phone to four on a desktop by changing only the track definition — no per-breakpoint markup, no JavaScript measuring the viewport. The structure adapts; the content stays put.

See it

Drag the columns control from 1 up to 6 and watch the same nine cards reflow into wider or narrower tracks — no card is added or removed, only the grid's column count changes. Then push the gutter up and down to feel how the gap alone changes how grouped or airy the set reads. The mono caption names the exact settings in play.

How it works

A CSS Grid is defined on the container, and the children fall into it automatically:

• grid-template-columns lists the column tracks. repeat(3, minmax(0, 1fr)) means "three equal tracks." The 1fr unit splits leftover space evenly; the minmax(0, …) floor lets tracks shrink below their content's intrinsic width instead of overflowing.
• gap sets the gutter between every row and column at once — one value, no per-child margins.
• Responsive reflow with no JS comes from repeat(auto-fill, minmax(16rem, 1fr)). Instead of a fixed count, you tell the grid "fit as many ≥16rem tracks as the container holds, then stretch them to fill." As the container narrows, the grid drops to fewer columns on its own. auto-fit is the same, except it collapses empty trailing tracks so the present items stretch to fill the row — reach for auto-fit when you want items to grow rather than leave gaps.

Build it

A responsive card gallery needs no breakpoints: auto-fill plus a minmax floor decides the column count from the available width, and a token gutter keeps the gaps on the spacing scale.

:root {
  --gutter: 1.5rem; /* 24px — a step on the spacing scale */
}
 
.gallery {
  display: grid;
  /* Fit as many ≥16rem tracks as fit, then stretch them to fill the row. */
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--gutter);
}
 
.gallery__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--gutter);
  border: 1px solid var(--border, #d6dae2);
  border-radius: 0.75rem;
}

Make it yours

• Swap a fixed repeat(4, 1fr) for repeat(auto-fill, minmax(16rem, 1fr)) and resize the window — the column count should change on its own, with no breakpoints.
• Try auto-fit instead of auto-fill with only two cards present and watch them stretch to fill the row instead of leaving empty tracks.
• Raise and lower the minmax floor (14rem vs 20rem) to set how dense the gallery gets before it drops a column.

Reproduce it with an LLM

Pitfalls & accessibility

• Don't lean on grid placement to repair a layout whose markup is in the wrong order — reorder the source so the structure reads correctly with styles off, then let the grid arrange it.

Further reading

• MDN — CSS Grid Layout
• web.dev — Learn CSS: Grid
• CSS-Tricks — A Complete Guide to Grid
• MDN — Subgrid