Spacing and grid: a spacing scale and columns for a site
A spacing scale on a 4 px base, a card by eye and by the scale, the law of proximity, a grid of 12, 8 and 4 columns and the rhythm of a page — with live examples.
In short
A spacing scale is a short set of distances from 4 to 96 px from which every margin, padding and gap of a site is taken. A grid is the system of columns, gutters and margins that places blocks on the page: usually 12 columns on a desktop, 8 on a tablet and 4 on a phone. Together they turn layout from a series of guesses into a few rules: small distances inside a group, large ones between groups, blocks aligned to columns. The page looks calm and expensive, elements line up across sections, and new pages are built faster because nobody chooses distances by eye.
A spacing scale: nine steps on a 4 px base
Each bar is shown at its real size. Small steps differ by 4 px, large ones grow faster — just as the eye notices the difference.
- --space-1 4 px
- --space-2 8 px
- --space-3 12 px
- --space-4 16 px
- --space-5 24 px
- --space-6 32 px
- --space-7 48 px
- --space-8 64 px
- --space-9 96 px
Why 4 and 8: these numbers divide well, fall on whole pixels on any screen and match the sizes of most icons and fonts. The exact base matters less than the fact that there is one, and that the steps have names — designers and developers say “space-5”, not “around 25 pixels”.
A card by eye and by the scale
The same card. On the right the padding and the gaps are highlighted — all of them are steps of one scale.
Oak table
Solid oak, oil and wax, 160 × 90 cm
Oak table
8Solid oak, oil and wax, 160 × 90 cm
24Spacing groups things: the law of proximity
Elements that are closer to each other are read as one group. Equal gaps everywhere make a list without structure.
Delivery
In the city in 3 days
Assembly
On the day of delivery
Warranty
5 years on the frame
Delivery
In the city in 3 days
Assembly
On the day of delivery
Warranty
5 years on the frame
The rule that works everywhere: the distance inside a group is smaller than the distance between groups — at least twice. A heading is closer to its text than to the previous block; a label is closer to its field than to the next one.
A grid: 12, 8 and 4 columns
Switch the screen: the columns are shown on top of the layout, and the blocks rearrange by the grid of each size.
column gutter 24 px page margin
Twelve columns divide into halves, thirds, quarters and sixths — that is why they are the standard for desktops. On a tablet eight columns are enough, on a phone four: content usually takes the full width, and the grid keeps the margins and the alignment.
The vocabulary of a grid
Seven words that are enough to agree on a grid between design and code.
| Term | What it is | Typical value |
|---|---|---|
| Column | a vertical strip the content stands on | 12 / 8 / 4 |
| Gutter | the space between columns | 16–24 px |
| Margin | the space from the edge of the screen | 16 px on a phone, 48+ on a desktop |
| Max width | how wide the page can become | 1200–1440 px |
| Breakpoint | the width where the grid changes | 768 and 1024 px |
| Span | how many columns a block takes | span 4, span 7, 1 / -1 |
| Section gap | air between large blocks of the page | 48 px on a phone, 96 on a desktop |
The rhythm of a page: air between sections
Large distances between sections and smaller ones inside them — the main lever of an expensive look.
Spacing and grid in code: 2 examples
The scale as CSS variables and a grid that changes the number of columns with the screen.
The spacing scale
Names by step, comments by role — the scale is read at a glance.
/* A spacing scale on a 4px base: every margin, padding and gap is one of these steps */
:root {
--space-1: 0.25rem; /* 4px — an icon and its text */
--space-2: 0.5rem; /* 8px — inside a group */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px — inside a card */
--space-5: 1.5rem; /* 24px — card padding, gutter */
--space-6: 2rem; /* 32px — between groups */
--space-7: 3rem; /* 48px — between sections on a phone */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px — between sections on a desktop */
}
.card { padding: var(--space-5); display: grid; gap: var(--space-2); }
.section + .section { margin-top: var(--space-7); }
@media (min-width: 64em) { .section + .section { margin-top: var(--space-9); } }The grid
One rule changes the number of columns, the gutter and the margins at each breakpoint.
/* A grid of 4 columns on a phone, 8 on a tablet and 12 on a desktop */
.page {
--columns: 4;
--gutter: var(--space-4);
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
column-gap: var(--gutter);
padding-inline: var(--space-4);
max-width: 80rem;
margin-inline: auto;
}
@media (min-width: 48em) { .page { --columns: 8; --gutter: var(--space-5); padding-inline: var(--space-6); } }
@media (min-width: 64em) { .page { --columns: 12; padding-inline: var(--space-7); } }
.hero { grid-column: 1 / -1; }
.text { grid-column: 1 / -1; }
@media (min-width: 64em) { .text { grid-column: span 7; } }6 rules of spacing and grid
-
01
Only steps of the scale
A distance that is not in the scale is a reason to check the layout.
-
02
Inside smaller than between
The gap inside a group is at least half of the gap between groups.
-
03
Gap instead of margins
Distances are set by the parent; children do not push each other.
-
04
Blocks by columns
Edges of text, photos and cards fall on the lines of the grid.
-
05
Air grows with the screen
48 px between sections on a phone, 96 on a desktop — the proportion is kept.
-
06
The same names everywhere
The scale in the layout tool and in the code has the same step names.
Common mistakes with spacing and grids
-
Equal spacing everywhere
The page loses its groups and reads as one long list.
-
Distances like 13 and 17
Close values look like a mistake and break alignment between blocks.
-
Too little air
Sections stuck together make even a good design look cheap.
-
The desktop grid on a phone
Twelve columns on 375 px give columns narrower than a word.
-
Margins that collapse
Vertical margins of neighbours merge; gap on the parent behaves predictably.
-
A grid only in the layout
If the code does not repeat it, alignment disappears at the first change.
Questions about spacing and grids
What is a spacing scale?
A short set of distances from which every margin, padding and gap of the site is taken.
4 px or 8 px base?
8 px is simpler; 4 px adds fine steps for dense interfaces. Both work if the team keeps to them.
How many columns does a site need?
Usually 12 on a desktop, 8 on a tablet and 4 on a phone.
What is a gutter?
The space between columns; in CSS it is set with column-gap.
How much space between sections?
About 96 px on a desktop and 48 px on a phone — and always more than inside the sections.
Grid or flexbox?
Grid for the layout of a page and cards, flexbox for a row of elements inside a component.
Online form
Layout
on a system
I design and build on a spacing scale and a grid that live both in the layout and in the code — pages stay consistent as the site grows. Tell me about the project — I answer within one working day.