Columns and Gutters
Columns are the vertical slots content sits in. Gutters are the gaps between them. Margins frame the whole grid. These three measurements define every placement decision.
A grid is not one measurement — it is three: column width, gutter width, and margin width. Understanding each separately is how you move from “I’m using a 12-column grid” to “I know exactly where everything should go.”
Columns: the slots
Columns are the vertical divisions that content occupies. An element that occupies three of twelve columns takes up one quarter of the grid’s total width. An element spanning twelve of twelve columns is full-width.
Column width is not specified directly in most grid systems — it is derived. You define the number of columns, the gutter width, and the total grid width, and column width falls out of the arithmetic. In CSS Grid: grid-template-columns: repeat(12, 1fr) with a gap property lets the browser calculate column widths automatically, making the math invisible.
The key layout questions are: how many columns should this element span, and should it start at a particular column? Those two decisions, applied consistently, create the alignment that makes a page feel structured.
Gutters: the gaps between columns
Gutters are the empty space between columns. Content cannot enter a gutter — it jumps from one column to the next. Gutters serve two functions: they create visual separation between adjacent elements, and they prevent the “breathing room” problem where a card’s right edge sits flush against the next card’s left edge.
Gutter width is a proportional decision, but the proportion does not stay constant across screen sizes. A 24px gutter on a 1200px grid creates comfortable separation. The same 24px gutter on a 320px mobile viewport would consume too much horizontal space — a 16px gutter fits better. Gutters compress more steeply than columns as the viewport shrinks: on mobile the gutter-to-column ratio is smaller than on desktop, and that is correct. Define separate gutter values at each major breakpoint rather than scaling gutters as a fixed proportion of width.
Margins: the frame
Margins are the space between the grid and the viewport edge. They are not part of the column system — nothing snaps to a margin. They are a frame, ensuring the content never touches the edge of the screen.
On desktop, margins are often 48px to 80px. On mobile, 16px to 24px is typical — enough to prevent accidental edge-taps, not so much that it wastes the limited horizontal space. Some designers vary the margin proportionally with viewport width using clamp(). Others use fixed values at defined breakpoints.
The relationship between the three
Column width, gutter width, and margin width are not independent. Change one and the others shift. On a fixed-width container, widening the gutters narrows the columns. Widening the margins narrows the grid itself. This interdependency is why grid decisions are made as a system, not element by element.
The practical starting point: define a content max-width (often 1200px to 1280px for wide layouts), set margins, decide on gutters, then let the browser derive column widths. Adjust until the proportions feel right, then lock the system and build consistently within it.
The next section moves from the grid to the other fundamental of layout: what space is and why it is not empty.