Layout Systems: Grids, Spacing, and Visual Rhythm
How to build layouts that feel intentional instead of arbitrary. Grid systems, spacing scales, and the rhythm that separates a designed interface from an assembled one.
The difference between a layout that feels designed and one that feels assembled is a system. Not a grid system you read about in a book, but a set of decisions about spacing, alignment, and scale that you apply consistently. Once you have a system, every layout decision is a choice from a finite set. Without one, every decision is a new argument with yourself.
A spacing scale, not arbitrary values
The first system I build on any project is a spacing scale. Usually a 4px base, so the scale is 4, 8, 12, 16, 24, 32, 48, 64, 96. Every margin, padding, and gap is one of these values. No 14px margins. No 22px gaps. The constraint forces consistency and makes the rhythm visible. Two elements with 16px between them feel related. Two elements with 17px between them feel like a mistake.
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
}A 12-column grid is a default, not a rule
The 12-column grid is popular because 12 divides by 2, 3, 4, and 6, which covers most layouts. But a grid is a tool for alignment, not a cage. The most interesting layouts break the grid intentionally, a hero that bleeds past the columns, a sidebar that sits outside the count. The grid gives you a baseline to break from. Without it, breaking the grid looks like a mistake. With it, breaking the grid looks like a decision.
A grid is not a cage. It is a baseline. The layouts that feel alive are the ones that know when to step off it.
Vertical rhythm is spacing applied vertically
Horizontal spacing gets the attention because it is visible in a screenshot. Vertical rhythm is what makes a long page feel composed. I use larger spacing between sections than within sections, so the eye can tell where one idea ends and the next begins. A section header gets 48px above it and 16px below. A paragraph gets 24px below it. The pattern, repeated, creates the rhythm. Inconsistent vertical spacing is what makes a page feel janky even when nothing is visibly wrong.