Layout, grids, and whitespace

Why it matters

When elements line up and the gaps between them follow a pattern, a screen looks calm and trustworthy, even if the viewer cannot say why. When every gap is slightly different and edges almost-but-not-quite line up, the design feels messy. Layout is also practical: a consistent system makes decisions faster for you, and it makes the design much easier for a developer to build.

The core idea: columns and spacing

A layout grid is a set of invisible guides that you place content on. Most screen grids have three parts:

• Columns: vertical strips that content spans. Phones commonly use 4 columns, tablets 8, desktops 12.
• Gutters: the gaps between columns (for example 16px on mobile, 24px on desktop).
• Margins: the space between the outer columns and the edge of the screen (often 16 to 24px on mobile).

A card might span all 4 columns on a phone, 4 of 8 on a tablet and 4 of 12 on a desktop. The grid does not force every element to fill a column exactly, but edges of major blocks should land on column lines.

The 8-point spacing system

The 8-point grid is a simple rule: every size and space is a multiple of 8 pixels. Typical spacing steps are 8, 16, 24, 32, 48 and 64. A 4px half-step is allowed for small adjustments such as the gap between an icon and its label.

Why 8? It divides evenly at the common screen densities (1x, 1.5x, 2x, 3x), it gives enough steps without too many choices, and it is widely used, so developers often already have matching spacing tokens. The exact number matters less than having a scale and sticking to it.

A worked example: a profile card on a phone

Frame: 360 by 640 (a common small-phone size). Grid: 4 columns, 16px margins, 16px gutters.

Card padding ............ 16
Avatar .................. 64 x 64
Avatar to name .......... 16
Name to job title ....... 4   (they belong together)
Title to bio ............ 16
Bio to buttons .......... 24  (a new group)
Button height ........... 48  (a comfortable tap target)
Gap between buttons ..... 8

Notice that the spacing tells a story. Name and job title are 4px apart because they are one unit. The buttons sit 24px below the bio because they are a separate group. Small gaps join things; large gaps separate them. That idea, proximity, is covered more in the next lesson.

Whitespace is not wasted space

Whitespace (or negative space) is any empty area, whatever its colour. Beginners often fill every gap because empty space feels like wasted space. In practice whitespace:

• Groups content, as in the card above.
• Creates focus. An element surrounded by space looks important.
• Improves reading. Generous line spacing and paragraph spacing make text easier to scan.

Micro whitespace is the small space inside components: padding in a button, space between lines. Macro whitespace is the large space between sections. Both matter. A crowded button with 2px padding looks cheap even on an otherwise roomy page.

Alignment

Pick a small number of alignment lines and use them again and again. Left-aligned text is easier to read than centred text for anything longer than a couple of lines, because each line starts in the same place. Centred layouts suit short, symmetrical content such as a title over a single button.

A simple check: draw vertical lines down the left edges of your elements. If you count more than three or four different lines on a simple screen, tidy them up.

Responsive thinking

Screens vary in width, so layouts must adapt. Designers usually design a small and a large version and decide what changes: the number of columns content spans, which elements stack, and which spaces grow. Spacing tokens can scale too, for example 16px section gaps on mobile and 32px on desktop, while staying on the 8-point scale.

Common mistakes

• Random values. Gaps of 13, 17 and 22px suggest nobody decided. Snap them to the scale.
• Equal spacing everywhere. If every gap is 16px, the viewer cannot tell which items belong together.
• Ignoring the margins. Text touching the edge of a phone screen is hard to read and looks broken.
• Tiny tap targets. Keep buttons and tappable rows at least about 44 to 48px tall.

Quick recap

• A layout grid has columns, gutters and margins; big blocks line up to it.
• The 8-point system uses multiples of 8 (with 4 for fine adjustments) for every size and space.
• Small gaps group, large gaps separate. Whitespace creates focus and readability.
• Keep alignment lines few and consistent.

Try it

Open the Do tab and lay out a profile card on a 4-column, 8-point grid, on graph paper or in free Figma.