Grids 101
Columns, gutters and margins, and why a grid makes a layout feel deliberate. The lesson covers the spacing system; this covers the structure that system sits on.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Explain why a spacing scale makes layouts consistent and faster to build.
- Set up a spacing scale based on a 4 or 8 pixel unit.
- Use a column grid with margins and gutters, and adapt it across screen sizes.
The idea
Spacing is the most frequent design decision you make. Every gap between two elements is a choice. Without a system, those choices drift: 13px here, 15px there, 22px somewhere else. The result looks slightly off and is slow to build and maintain.
Spacing scales
A spacing scale is a short list of allowed spacing values. Many teams base it on a 4 or 8 pixel unit, because common screen sizes divide evenly and the values are easy to remember. A typical scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. Small steps are close together for fine adjustments inside components; large steps are far apart for separating sections.
The scale supports proximity: use small values inside groups (a label and its field, 4 to 8px), medium values between related groups (16 to 24px), and large values between sections (48px or more).
Column grids
A column grid divides the width of a screen into columns separated by gutters, with margins at the edges. Content spans one or more columns. A common setup is 12 columns on desktop, 8 on tablet and 4 on phones, but the right number depends on your content.
Grids create alignment across a whole page, help with responsive layouts, and give designers and developers a shared vocabulary ("the sidebar spans 3 columns"). A grid is a guide, not a cage: some elements, such as full-bleed images, can deliberately break it.
Baseline and vertical rhythm
Some teams also align text line heights to the same unit (for example line heights that are multiples of 4px). This creates a steady vertical rhythm. It is useful, but less important than consistent spacing values and a clear horizontal grid.
Why it matters in real projects
A spacing scale and grid speed up design and development dramatically. Developers can implement spacing with a small set of tokens, designers stop debating 2px differences, and screens built by different people look like they belong to the same product. Consistent spacing also makes grouping clearer, which reduces errors.
A realistic example
An events app has been designed by four freelancers over two years. An audit finds 23 different spacing values and three different page margins. Screens look subtly inconsistent, and developers keep asking for exact measurements.
The team adopts an 8px-based scale (4, 8, 16, 24, 32, 48, 64), a 4-column mobile grid with 16px margins and gutters, and a 12-column desktop grid with 24px gutters. They update components first (buttons, cards, form fields) so most screens improve automatically. New screens are faster to design because spacing decisions now come from a list, not from scratch.
Step by step
Audit current spacing
Measure the gaps on three screens of a product and list every value you find.
Choose a base unit
Pick 4px or 8px. Eight is simpler; four gives finer control inside dense components.
Define the scale
Write 7 to 10 values. Name them (for example space-1 to space-9, or xs to 3xl).
Map old values to the scale
Round every audited value to the nearest scale step.
Set up a grid
Define columns, gutters and margins for phone, tablet and desktop.
Rebuild one screen
Apply only scale values and align content to the grid. Compare with the original.
Common mistakes
Mistake Using any value that "looks right".
Instead Choose from the scale. If nothing fits, question whether the layout needs changing, not the scale.
Mistake Treating the grid as mandatory for every element.
Instead Use it for major structure. Allow intentional exceptions such as full-width images.
Mistake Same spacing everywhere.
Instead Use small values inside groups and larger values between them, so spacing communicates structure.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Spacing audit and rebuild
Audit and rebuild one screen of a real product using a spacing scale and grid.
Steps
- Screenshot a screen and measure at least 15 gaps.
- Define an 8px-based scale.
- Rebuild the screen using only scale values on a 4-column mobile grid.
- Annotate where you used small, medium and large spacing and why.
Deliverable
Audit list, scale definition, and before and after screens with annotations.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- A spacing scale limits spacing to a small set of values, often based on 4 or 8px.
- Spacing communicates grouping: small inside, large between.
- Column grids with margins and gutters create alignment and adapt across screen sizes.
- Grids guide layout; intentional exceptions are fine.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Using Grids in Interface Designs (opens in a new tab)Nielsen Norman Group
- Spacing (opens in a new tab)GOV.UK Design System
A real, public spacing scale with responsive values.
- Layout (opens in a new tab)GOV.UK Design System
Your notes
Marking complete updates your course and roadmap progress.