Lay out a page with a grid, space and a clear focal point
Use columns, margins and a spacing scale, align to fewer edges, give the page one focal point and control the order people read in.
Beginner5 min readUpdated 25 September 2026Editor · Guides
On this page
Layout is how you decide where things go and how far apart they are. A layout works when a stranger knows where to look first, second and third without thinking. You will learn the few rules that do most of the work, and how to set up guides and alignment in the Editor.
Start with a grid
A grid is a set of columns separated by gutters, inside margins. It is not a cage. It gives you a small number of edges to line things up to, so the page looks intentional.
- Margins keep content off the edge. They protect against trimming in print and against phone interfaces on social.
- Columns set where blocks can start and end. Twelve columns divide into 2, 3, 4 and 6, which is why web layouts use them. Posters and flyers often need only 2 to 6.
- Gutters are the gaps between columns. Make them wide enough that two columns of text never read as one line.
Let an element span several columns. A headline over all twelve, an image over eight, a caption in the remaining four: that is a grid working.
Align to fewer edges
Every element creates invisible lines along its edges and centre. Each new alignment line adds visual noise. A strong layout shares edges: the headline, body and button all start at the same left edge. Count the distinct left edges on your page; if there are more than three or four, merge some.
Trust your eye over the numbers for round and pointed shapes. An O or a triangle aligned exactly to a square edge looks slightly inset, so nudge it out a little. This is optical alignment, and type designers do the same with round letters.
Space is a design element
Things close together read as a group; things far apart read as separate. This is proximity, and it is the cheapest way to organise a page. The space between a heading and its paragraph should be clearly smaller than the space between that paragraph and the next heading.
Pick spacing from a scale instead of by eye. With a base unit of 8 px, use 8, 16, 24, 32, 48, 64, 96, 128. Consistent steps make a page feel calm even when it is full. Empty space is not wasted. It makes the important thing look important.
One focal point
Every piece needs one thing that wins. Make it win by contrast: much bigger (two to three times the next element), much darker or brighter, a different colour, or the only thing with space around it. If two things compete, the reader picks neither.
The rule of thirds is a helpful starting point for photos and big images: put the subject near where lines a third of the way in cross, rather than dead centre. Centred compositions are fine too; they read as calm and formal.
Control the reading order
In left-to-right languages, people scan a poster in a rough Z (top left, across, down diagonally, across the bottom) and a text-heavy page in an F (across the top, down the left side, shorter scans across). Put what matters where the eye already goes: the focal point near the top or at the first stop, the call to action at the end of the path, usually bottom right or bottom centre.
Number your elements 1 to 5 in the order you want them read, then look at the design fresh. If the eye goes to number 4 first, it is too big, too bright or too isolated.
Balance
A big dark block on one side needs something to answer it on the other: a smaller dark element further out, a block of text, or a lot of empty space. Symmetry is stable and formal. Asymmetry is lively but needs the weights to balance, like a see-saw with a heavy child near the middle and a light one at the end.
Do it in Voidcanvas
- Choose View, Guides, New guide layout… and set Columns, Rows, Margin (px) and Gutter (px). The presets fill these in: 12 column web (12 columns, 40 px margin, 20 px gutter), Thirds (3 by 3, no margin), 2 columns print (60 px margin, 24 px gutter) and Safe margins (a single 60 px margin frame). Press Make guides.
- Turn on Rulers (Ctrl+R) to drag out single guides, or use View, Guides, New guide… to place one at an exact pixel position.
- Keep Snap on (Ctrl+Shift+;). Dragged layers snap their edges and centres to the canvas edges and centre, to other layers, and to guides while guides are showing. Hold Alt while dragging to move freely.
- Select several layers and use Layer, Align: Left edges, Horizontal centres, Right edges, Top edges, Vertical centres, Bottom edges. With three or more selected, Distribute horizontally or Distribute vertically evens out the gaps.
- Hide guides with Ctrl+; to judge the layout clean. Lock guides (Ctrl+Alt+;) stops you dragging them by accident.
On a Mac, use Cmd in place of Ctrl. For more on multi-select and grouping, see Groups, align and guides.
The brand guideline builder records the system for a whole brand: on the Identity tab, Spacing unit (4 px or 8 px) sets a spacing scale of 1, 2, 3, 4, 6, 8, 12 and 16 times the unit, and Grid sets 6, 8 or 12 columns with a gutter of three units.
Common problems
- It looks cluttered but nothing is wrong on its own. Too many alignment edges or uneven gaps. Pick one spacing step for related items and a bigger one between groups.
- The focal point gets lost. Two or more things are the same size. Shrink everything except one.
- Text sits too close to the edge. Use the Safe margins preset and keep all text inside it.