Layout grids: columns, gutters, margins

01The parts of a grid

A layout grid has three parts. Columns hold content. Gutters are the gaps between columns. Margins are the space between the grid and the screen edge. Together they give every element a predictable place, which makes pages feel aligned and easier to scan.

• Common conventions: 4 columns on phones, 8 on tablets, 12 on desktop.
• Gutters and margins work well when taken from the spacing scale.

02Breakpoints, line length and margins

Set breakpoints where the content breaks, not at the sizes of particular devices. Narrow the browser window until the layout looks wrong, then add a breakpoint at that width. Device sizes change every year; content problems do not.

Also set a maximum content width. A long-standing typographic guideline is roughly 45 to 75 characters per line for comfortable reading. Wider lines make it hard to find the start of the next line.

<code>max-width: 65ch;</code> is a quick way to limit text width.

Margins and gutters scale with the screen. A phone may use a 16 px margin and a 16 px gutter, while a desktop layout might use a 24 or 32 px gutter inside a centred container with a maximum width. Taking these values from the spacing scale keeps the grid in step with the rest of the interface.

• Not every element must span many columns. A narrow article column surrounded by empty columns is a valid layout.
• Let images and cards span whole columns so their edges line up.
• Test the layout with real content, including long words and longer Arabic text.

03CSS grid in practice

CSS grid builds these layouts directly. A responsive card grid needs no media queries:

Example: <code>display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));</code>

Each column is at least 240 px wide, and the browser fits as many as the space allows.

04Keep alignment consistent

1. Choose a column count and take gutters from the spacing scale.
2. Align elements to column edges, not to arbitrary positions.
3. Cap text width near 65 characters.
4. Find breakpoints by resizing the content.

For right-to-left layouts, use logical properties so the grid mirrors correctly.

Consistent alignment is the quiet benefit of a grid. When headings, images and buttons share the same left edge, or the same right edge in Arabic layouts, the page reads as one organised surface. Break the grid only on purpose, for example for a full-width image, and make the exception obvious.

05Sources

• MDN Web Docs. CSS grid layout. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout