Spacing in UI design and the 8-point grid

Why spacing decides whether a screen looks designed

Two screens with the same components, the same colors and the same type can look entirely different, and the difference is usually spacing. Tight spacing makes unrelated blocks read as one clump, loose spacing makes a single card look like two separate things, and a margin that drifts by a few pixels on one side is the detail that makes a finished product look hand-made.

Spacing is also the cheapest part of a design to repair. A new color needs a value you do not have and a second look at every screen it touches. A gap moved from 8 to 16 is one field in the inspector, and everything in that container shifts together, which is why spacing is the first thing to sort out. The shortcut sheet lists the nudges that catch the rest.

• Equal gaps inside a group, larger gaps between groups
• One margin value shared by every block on the screen
• A gap that differs by a few pixels is a slip, not a decision
• Consistency across screens beats a perfect value on one

Note: The grid and the snap belong to App Builder. The freeform canvas has neither, so the rules here apply to interface frames rather than to drawings.

Build a spacing scale on 8s

A spacing scale is a short list of the values you allow yourself to use. The 8 pixel grid is what makes a scale work, because every value that is a multiple of 8 lands on the same rhythm as the elements around it. A scale of 4, 8, 16, 24, 32 and 48 covers nearly every gap a screen needs. The component guide covers where the scale belongs in a wider system.

Keeping the scale short is the whole point. Six values can cover an entire product if each has a job: 4 for the gap inside a button, 8 between a label and its field, 16 between blocks in a card, 24 between a header and the content, 32 between sections, and 48 around a full page. The names matter less than the discipline, but writing the jobs down is what stops a fourth margin value from appearing.

• Six values on the scale: 4, 8, 16, 24, 32 and 48
• Give each value one job and write the job next to it
• Treat a 10 pixel gap as a leftover rather than a decision
• Double an off-scale value instead of inventing an odd one

Note: The scale belongs to your team, and the only real rule is that it must be a scale. Five values used everywhere beat seven values used mostly.

Set the scale once with auto-layout gap

Auto-layout is where a scale stops being a habit and becomes a setting. A container carries a direction, a gap, a padding and an alignment, so the space between the blocks inside it is one number in one field. Change it and the stack re-flows, which is the opposite of nudging each block by hand and hoping the result still looks even.

The inspector offers Direction as vertical or horizontal, a Gap field, a Padding field, cross alignment with start, center, end and stretch, and main alignment with start, center, end and space. The gap and padding fields both run from 0 to 96, so every value on a sensible scale is available without a workaround.

1. Switch auto-layout on. Select the container and use the Auto-layout toggle in the inspector, which starts it at a vertical direction with a 12 pixel gap and 16 pixels of padding.
2. Type your gap. Replace the gap with the value from your scale and let the children re-flow into their new positions.
3. Nest a tighter gap. Inside a card or a row, set a smaller gap so the levels of the structure become visible.

Note: The 12 and 16 defaults are sensible starting points but they are defaults rather than rules, so replace them with your scale before you build a second screen.

Use padding for the frame edge

Padding is the space between the edge of a container and the content inside it, and it does two jobs. It keeps content off the edge of the screen, and it sets the margin that every block on the screen shares. When the left edge of the title, the left edge of the list and the left edge of the button all sit 16 pixels from the frame, the screen reads as aligned before the reader has noticed anything.

Set the padding on the outermost container rather than on each block. A block that carries its own padding inside a padded container produces a double margin on one side, and that mismatch is the most common reason a screen appears to lean.

• One padding value for the frame, set on the outer container
• Never pad a block that already sits inside a padded container
• The same number on the left and the right, and top and bottom
• 16 pixels is a common starting margin on a 390 pixel wide frame

Note: Padding is clamped between 0 and 96 like the gap, and a container whose width or height is zero hugs its children instead of leaving a hole behind them.

Let the 8 px snap grid catch the rest

Auto-layout owns the space between things a container contains. The space between things that float free is where the 8 pixel placement snap grid earns its keep. Components snap to it while you drag, so a block positioned by hand lands on the same rhythm as one placed by a container, and the two agree without anyone comparing coordinates.

The grid is a floor rather than a ceiling. It puts an element on the grid but it cannot know that two elements 12 pixels apart should be 8 or 16 apart, so the judgment still comes from you. Use the grid to catch sloppy values and the scale to choose between the plausible ones.

• The placement grid in App Builder measures 8 pixels
• The layout grid overlay draws the column guides over the frame
• Arrow keys nudge by 4 pixels, and by 16 with Shift
• The grid catches errors while the scale chooses values

Note: Neither the overlay nor the snap applies to the drawing canvas, where spacing stays a matter of the eye rather than a system.

Keep gutters consistent between columns

A column is a run of content, and the space between two columns is the gutter. The gutter has to be the same everywhere on the screen and it has to come from the scale. A dashboard with a 24 pixel gutter under the charts and a 12 pixel gutter between the table and the sidebar looks like two designers worked on it separately, and often they did.

Build the columns inside a container with a horizontal direction, set the gap to the gutter value, and give the columns a cross alignment of stretch so they share a height. Stretched columns keep the rule running to the bottom edge, which is what makes a row of cards read as a row. The mobile layout guide covers the same idea on a single screen.

The last check is the one that gets skipped. Measure the gap between the columns and the gap between the items inside a column, and ask whether both are on the same scale. Often they are not, and when they are not, the fix is a single field rather than a redesign.

• One gutter value for the whole screen, taken from the scale
• Stretch the columns so the row shares a common edge
• A horizontal auto-layout container builds the row in one move
• Compare the gutter against the inner gaps before you call it done

Note: When a screen needs a narrower gap than the scale allows, narrow the columns rather than the space between them, and keep that gutter identical across the screen.

A checklist you can reuse

• A spacing scale of six values is written down where the team can see it
• Every gap and margin on the screen comes from that scale
• Auto-layout carries the spacing instead of dragged positions
• The outer container sets one padding value and uses it on both sides
• Hand-positioned elements land on the 8 pixel placement grid
• Off-scale values have been rounded up or down to the scale
• Column gutters match the gaps used inside the columns
• The screen has been checked in the light and the dark theme

Common mistakes to avoid

• Dragging every block into place. Hand-placed positions cannot be reviewed as a rule and they drift as soon as the content changes. Put the spacing into auto-layout so it is one number.
• A different margin on each side. Asymmetric margins read as a lean rather than a decision. Set the padding on the outer container and check that both sides match.
• Padding on top of padding. A block with its own padding inside a padded container doubles one margin. Keep the padding at a single level of the structure.
• Off-scale spacing. Ten and fifteen pixel gaps are leftovers rather than choices. Round them to the nearest value that already exists on the scale.
• A new rhythm on every screen. If each screen invents its own spacing, the product stops feeling like one product. Reuse the same scale and the same values everywhere.

Frequently asked questions

What is the 8 pixel grid in App Builder?

It is the placement grid that components snap to as you drag them, and the rhythm most mobile interfaces work on. The toggleable layout grid overlay draws column guides over the frame so you can see where your margins sit, and arrow keys nudge a selection by 4 pixels, or 16 pixels with Shift. The grid catches mistakes, but you still choose the values.

Should every gap be a multiple of 8?

Not every one, but the scale should be. A 4 pixel gap inside a button divides evenly, and a 24 pixel gap between sections is three 8s. The real problem is not odd numbers, it is values that never repeat, so six values used consistently will always beat thirty values used once each.

How do I keep spacing consistent between two screens?

Put the scale somewhere the whole team can read, and set the same values on the same levels of the container structure in both screens. Auto-layout helps because the gap and padding live in named fields on a container instead of in the position of a block. If a screen needs an exception, make it in one place and write it down next to the scale.

Does the 8 pixel grid exist on the freeform canvas?

No. The canvas is a drawing surface with no grid and no snap-to-grid, so the spacing method in this guide applies to interface frames inside App Builder. When you are drawing a diagram rather than designing an interface, spacing is a matter of judgment rather than a system of rules.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.