The short answer
Layout is deciding where things go; a grid and a spacing scale are the systems that make those decisions consistent instead of case-by-case. Users never notice good spacing - they only feel that a screen is easy to parse. They absolutely notice bad spacing, even if they cannot name why.
A spacing scale
The foundational move is a spacing scale - a fixed set of values used for every gap, pad, and margin. Most teams use a 4px or 8px base and multiples of it: 4, 8, 12, 16, 24, 32, 48. Restricting yourself to the scale means spacing decisions become "which step," not "which number," and everything lines up because it shares a common unit. Store it as tokens.
Grids and columns
A grid divides the canvas into columns with consistent gutters, giving elements shared edges to align to. A 12-column grid is common because 12 divides cleanly into halves, thirds, and quarters. The grid is a guide, not a cage - but aligning to it is what makes unrelated components feel part of one layout.
Alignment and rhythm
- Alignment. Every element should line up with something. Stray edges are the most common reason a screen feels "off."
- Proximity. Related things sit close; unrelated things get space. Grouping by distance is faster to read than boxes and lines.
- Rhythm. Consistent vertical spacing between sections creates a predictable cadence down the page.
Layout in practice
On the web these systems map directly onto CSS: Flexbox and Grid with a gap drawn from your spacing scale, and breakpoints that reflow columns as the viewport narrows. Design the hardest layout - usually the smallest screen or the densest data - first, and looser layouts fall out of it.
Pitfalls
- Off-scale values. A stray 13px gap breaks the rhythm the scale exists to protect.
- Everything centered. Centering removes the shared left edge the eye relies on to scan.
- No breathing room. Cramming to avoid scrolling makes screens harder, not faster, to use. Whitespace is a feature.