BitWithBite
UI/UX · Quick Reference
Lesson 5 — Spacing, Grids & 8px Cheat Sheet
In one line: An 8px base unit and column grids keep spacing and layout mathematically consistent.
The 8px System
1Base unit. All spacing is a multiple of 8px (8, 16, 24, 32...).
2Why 8. Divides cleanly by 2 and 4, matching common screen densities.
3Column grids. Give layouts consistent, predictable alignment.
Valid vs Invalid Spacing
Valid: 8px, 16px, 24px, 32px
Multiples of the 8px base unit
Invalid: 5px, 7px, 13px
Breaks the grid, creates inconsistency