Layout Grids and Spacing

UI/UX · ~8 min read

Good layout is invisible. Nobody praises a page for having consistent 16-pixel gaps, but everybody feels it when the gaps are 14, 16, 22 and 19 pixels on four consecutive rows. Grids and spacing systems are the scaffolding that makes a screen feel calm and intentional, and once you have one, half your layout decisions make themselves.

Pick a spacing unit and never freehand

Choose a base unit and make every gap a multiple of it. Multiples of four — the 4pt scale — are the current default because they divide neatly into the common device pixel ratios: on a screen where 1 CSS pixel maps to 2 or 3 physical pixels, multiples of four stay crisp. Where you need finer control, such as icon interiors or tight text pairs, you can borrow a 2-unit step, but the layout itself should live on the four-unit grid.

Eight-pixel as the primary step — an 8pt scale with a 4pt half-step — is a good default for product UI, because it is coarse enough to stay consistent and fine enough to stay flexible.

Spacing encodes relationships

The single most useful idea in layout spacing is this: the space between two elements tells the user how related they are. Tighter means more related. If your gaps are arbitrary, the grouping the user perceives is arbitrary too.

Apply the proximity rules consistently:

• A label and its field: 4–8px — they are one unit.
• One form field and the next: 16–24px.
• The last field of a group and the next group's heading: 32–48px.
• A section heading and the content it introduces: 8–16px.
• Between entirely separate sections: 48–64px or more.

Notice the jump. Section gaps should be visibly larger than within-section gaps, often around double. That contrast is what lets the eye chunk a dense interface instantly.

Columns do the structural work

A spacing scale governs the gaps; a grid governs the columns. Together they give you alignment that survives every new screen. The column model to reason about has three parts:

• Columns — typically 12 on desktop, 8 on tablet, 4 on mobile.
• Gutters — the fixed space between columns, usually 16–24px.
• Margins — the outer padding, which often grows with the viewport.

Why twelve columns when you rarely see twelve things in a row? Because twelve divides by 2, 3, 4 and 6, so it accommodates halves, thirds, quarters and sixths without a bespoke grid. A three-column card row is four grid columns each; a 2:1 split is eight and four. Eleven columns would be a party trick; twelve is a toolkit.

Watch the measure, not just the columns

A 12-column grid on a 1600-pixel monitor produces a text column far wider than anyone can read. Grids are for alignment; readability still obeys its own rule. Cap prose containers at roughly 640–720 pixels — around 66–75 characters at 16px — and centre or anchor them on the grid. Let image galleries span the full grid while body text occupies a narrower, readable sub-grid.

Baseline rhythm and vertical consistency

Horizontal alignment is obvious; vertical rhythm is the detail that separates polished work from merely tidy work. Keep a consistent vertical unit — often the body line height, around 24px — and space vertical gaps as multiples of it. Headings then begin on the same rhythm line as the paragraphs around them rather than drifting by two or three pixels.

You do not need a strict baseline grid over everything, which fights with images and varied components. A consistent vertical unit gets most of the benefit: let paragraphs, list items and card rows all land on multiples of 24 and the page acquires a quiet steadiness.

Density is a dial, not a default

The same scale can serve a spacious reading layout and a dense data grid by changing which tokens you reach for, not by abandoning the scale. A comfortable layout might use 16px card padding and 32px section gaps; a dense admin table might use 8px row padding and 12px between groups — still all multiples of four. Define two or three density presets on the same scale so teams pick a mode deliberately instead of each screen inventing its own feel.

Remember the trade-off. Generous spacing helps first-time and occasional users but wastes screen space for people who live in the tool all day. Tight spacing rewards experts but overwhelms newcomers. Match density to usage frequency, and keep one scale underneath so the transitions still feel like the same product.

Breakpoints and fluid change

Grids must adapt without redrawing every layout by hand. Define a small set of breakpoints — commonly around 640, 768, 1024 and 1280 pixels — and describe how the grid behaves at each: columns, gutters and margins. Between breakpoints, let gutters and margins flex with the container so nothing looks cramped just above or below a jump.

The test is always content, not the device. Resize slowly and watch for the moment a line gets too long, a card gets too narrow for its label, or a row of items starts to wrap awkwardly. Move the breakpoint to that moment, not to a round number you read somewhere.

Auditing alignment

When a layout feels slightly off and you cannot say why, the cause is almost always a stray value. A quick audit sorts it:

1. Toggle a grid overlay at your base unit and look for elements that do not sit on it.
2. List every spacing value in the screen and check that all are tokens, not one-offs.
3. Check left edges: do all content blocks align to the same column line?
4. Check vertical gaps between repeated elements for consistency.

Fix the outliers and the whole screen settles. Layout is not about making every gap large; it is about making the gaps deliberate, so that the few places you break the pattern do so because the content demanded it.