Spacing and layout: the rhythm nobody notices when it works

The 4px base

A 4px base with an 8px preferred increment is the pragmatic default. It divides cleanly at common device pixel ratios, it matches the granularity most icon sets are drawn on, and it leaves 4px available for the genuinely tight cases — the gap between an icon and its label, or between a statistic and its caption.

Six steps carry almost everything:

Three hard rules ride on top of the scale. Text never sits within 16px of a container edge or border. Distinct elements inside a card get at least 24px between them. A statistic and its label get exactly 12px — close enough to read as one unit, far enough not to collide.

Inside-out, not outside-in

Spacing decisions should start at the smallest component and work outward. If a button's internal padding is 12px/20px, the form field beside it should share the same vertical rhythm, and the card that holds both should use a padding that is a multiple of the same base. Working outside-in — picking a nice page margin first — tends to produce components that only look right in one container.

Prefer gap over margins for anything in a flex or grid container. Gap cannot collapse, cannot leak out of its parent, and is trivially responsive. Reserve margins for the vertical rhythm of flow content, ideally as a single "stack" rule rather than per-element margins scattered across the sheet.

Containers and breakpoints

The hard floor is 320px. Below that, most layouts are fighting the device rather than serving a user. At 320px with 16px padding each side you have 288px of content width, so nothing in the system may declare a fixed or minimum width above 280px.

Grid recipes

• Auto-fit card grid. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) handles one to four columns with no media query at all.
• Asymmetric split. A 7/5 or 8/4 column split for hero and feature rows, collapsing to a single column at 768px with the media block moving below the copy.
• Sidebar + flow. A fixed-ish sidebar using minmax(220px, 280px) beside a 1fr main column; the sidebar becomes a horizontally scrollable strip or a stacked block on small screens.

The failure modes worth naming

Four bugs account for most broken responsive layouts, and all four are avoidable by rule:

1. Grid and flex children that will not shrink. Their default min-width is auto, so a long word or a wide table pushes the whole track out. Set min-width: 0 on children by default.
2. Unbreakable strings. Brand names, URLs and long compound words overflow silently. Set overflow-wrap: anywhere on headings, navigation and anything holding a brand string.
3. Negative-inset decoration. Offset frames and glow pseudo-elements with negative insets extend past the container and create horizontal scroll on small screens. Reduce the offset to zero below 768px.
4. Masking with overflow-x: hidden. It hides the symptom and takes position-sticky with it. Use overflow-x: auto on a table or code wrapper where scrolling is genuinely wanted, and fix the cause everywhere else.

Pros and cons

Pros. A fixed scale removes an entire category of review comments. Reflow instructions written as part of the system mean the responsive behaviour is designed rather than discovered. Densities can be swapped by re-mapping six tokens.

Cons. Strict scales occasionally fight optical alignment — an icon may genuinely need 3px to look centred next to text, and the honest answer is to allow a documented exception rather than pretend the grid is always right. Very dense data tables may also need a tighter half-step, which is worth adding explicitly rather than inventing ad hoc.