Stage 2 · Lesson 1 of 7
Layout grids and columns
A splits the screen into columns. The gaps between columns are called , and the space at the outer edges is the . Common choices are 4 columns on phones, 8 on tablets and 12 on desktops.
Twelve divides evenly into halves, thirds and quarters, which gives you many layout options. When content lines up with the columns, screens feel ordered. It also makes responsive design easier.
At each , the screen width where the layout changes, a block can simply span fewer columns. Grids are guides, not cages. A full-width image or an indented quote can break the grid on purpose. Spacing comes next: it fills the space inside and between grid areas.
Common trapsetting up a grid and then placing elements a few pixels off it, which looks sloppy even when nobody can say why.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMaterial Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
- BookPaidRefactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background
Practise
Keep handy
Also worth your time
How size, colour, contrast and spacing create reading order, with examples