Free Design Calculators
Column & Gutter Calculator
Calculate column width from canvas size, column count, gutters, and outer margins.
What this tool does
Resolve grid dimensions before layout production.
The calculator subtracts outer margins and gutters from the canvas, then divides the remaining width into equal columns.
A compact preview makes invalid or impractical combinations visible before they are applied to a design file.
Use the tool
Calculate columns and gutters
Enter canvas width, column count, gutter, and margin values.
Canvas, margins, and gutters
Grid measurements
86.00 px
per column
Content width: 1296px · 11 gutters
How to use it
Three quick steps
- 1Set the complete canvas width.
- 2Choose the columns, gutter, and outer margins.
- 3Transfer the result and verify rounding in the target design application.
Worked example
Build a 12-column desktop grid
Use 1440px width, 72px margins, and 24px gutters.
FAQ
Questions about the column and gutter calculator
Practical details about using the tool and understanding its result.
Keep working
Related tools
Grid Calculator
Calculate precise column widths from a canvas, margins, gutters, and column count.
Open toolSpacing Scale Generator
Generate a proportional spacing system and copy it as CSS custom properties.
Open toolResponsive Breakpoint Preview
Load a public page into adjustable mobile, tablet, laptop, and desktop viewport frames.
Open toolFrom one asset to the whole workflow
Keep grid decisions consistent across layouts and breakpoints.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.