Column width = (canvas − 2 × margin − gutter × (columns − 1)) ÷ columns. Set the gutter; the column width follows.
Download the 1440px templates
Column width on a 1440px canvas
| Columns | 20px gutter | 24px gutter | 30px gutter | 40px gutter |
|---|---|---|---|---|
| 4 | 345 px | 342 px | 337.5 px | 330 px |
| 6 | 223.33 px | 220 px | 215 px | 206.67 px |
| 8 | 162.5 px | 159 px | 153.75 px | 145 px |
| 9 | 142.22 px | 138.67 px | 133.33 px | 124.44 px |
| 10 | 126 px | 122.4 px | 117 px | 108 px |
| 12 | 101.67 px | 98 px | 92.5 px | 83.33 px |
| 16 | 71.25 px | 67.5 px | 61.88 px | 52.5 px |
| 24 | 40.83 px | 37 px | 31.25 px | 21.67 px |
Common grid widths
| Canvas | 12 cols @ 30px | Where it comes from |
|---|---|---|
| 1440 px | 92.5 px | Figma default desktop frame; MacBook Air scaled resolution |
| 1280 px | 79.17 px | Common laptop breakpoint |
| 1200 px | 72.5 px | The 1200px Grid System; Bootstrap xl container |
| 1140 px | 67.5 px | Bootstrap 5 xl container width |
| 960 px | 52.5 px | The original 960 Grid System |
| 390 px | 85.5 px | iPhone 14 / 16e viewport — 4 columns at a 16px gutter |
Generator
Full generator with CSS Grid, Tailwind and Figma output: open the grid generator.
Questions
What is a grid system in web design?
A repeating set of columns, gutters and margins that everything on a page aligns to. It removes per-element spacing decisions and makes a layout feel deliberate rather than arranged.
How many columns should a grid have?
12 is the usual answer because it divides by 2, 3, 4 and 6 — halves, thirds, quarters and sixths all work. 8 suits editorial layouts; 4 is standard for mobile.
What is the 8-point grid?
A spacing system where every measurement is a multiple of 8px. It keeps vertical rhythm consistent and maps cleanly onto 1×, 2× and 3× displays, because 8 divides evenly at every scale.
What gutter width should I use?
16–24px on mobile, 24–32px on desktop. Large enough to separate columns clearly, small enough that they still read as one system. On a 1440px canvas, 30px is a common choice.
Should the grid be fixed or fluid?
Fluid. Use repeat(12, minmax(0, 1fr)) — the pixel column width from your design file exists so the file and the build agree, not to be hard-coded into CSS.