Grid Column Calculator
Column widths for any container, column count and gutter — with copy-ready CSS grid code and multi-column span sizes.
808 views
The Column Math
Column = (container − (columns−1) × gutter) ÷ columns. A 1200 px container with 12 columns and 24 px gutters gives 78 px columns; an element spanning 4 columns is 4×78 + 3×24 = 384 px. The tool lists every span width so you can pull exact sizes into design files.
In CSS you rarely hard-code these: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px makes the browser do the division. The pixel values matter for Figma frames, image exports and understanding what 1fr actually resolves to at your breakpoints.
Frequently Asked Questions
Should margins be included in the container width?
No — enter the content width (container minus side margins/padding). A 1440 px design with 120 px margins each side has a 1200 px working container.
12 columns or something else?
12 divides by 2, 3, 4 and 6, which is why it became the default. Dense dashboards sometimes use 24; simple marketing pages do fine with 6 or even 4.
Similar Tools
Report a Problem
Grid Column Calculator