Every well-built interface is secretly built on a grid, even when nothing on screen looks boxed-in. The grid is invisible in the final product — its job is discipline, not decoration.
The most common layout grid divides the screen width into 12 equal columns with consistent gutters (gaps) between them. 12 is popular specifically because it divides evenly into halves, thirds, and quarters — a 2-column layout, a 3-column layout, and a 4-column layout can all share the same underlying grid without redesigning it.
| Layout need | Columns used (of 12) |
|---|---|
| Two equal side-by-side sections | 6 + 6 |
| A sidebar plus a main content area | 3 + 9, or 4 + 8 |
| Three equal cards in a row | 4 + 4 + 4 |
| Four equal cards in a row | 3 + 3 + 3 + 3 |
Elements aligned to a shared grid look intentional and ordered even without any visible lines — the eye picks up on the consistent edges. Elements placed "by eye" without a grid tend to look almost-but-not-quite aligned, which reads as sloppy even when the difference is only a few pixels.
The same 12-column logic typically collapses to fewer columns on smaller screens (commonly 4 on mobile, 8 on tablet) — covered in depth in the later responsive design lesson. The grid concept doesn't change; only the column count and gutter size adjust per breakpoint.
A tool that makes this concrete
Figma's layout grid feature (under a frame's Layout Grid settings) can overlay a real 12-column grid directly on the canvas while designing — turning this from theory into a visible guide.