Free Design Calculators
Column Grid Calculator
Calculate precise column widths from a canvas, margins, gutters, and column count.
What this tool does
Resolve column widths before laying out the page.
The calculator removes both outer margins and all gutters from the canvas, then divides the remaining width evenly across the selected columns.
A live diagram shows the resulting column rhythm and outer spacing.
Use the tool
Calculate columns, gutters, and margins
Enter a canvas width and grid settings to see the exact column width.
Canvas and column settings
Set the full canvas width, outer margins, column count, and space between columns.
Calculated grid
70 px / column
- Usable column area
- 840 px
How to use it
Three quick steps
- 1Enter the total canvas or viewport width.
- 2Set the number of columns, gutter width, and margin on each edge.
- 3Use the calculated column width or revise the inputs until the grid resolves cleanly.
Worked example
Build a 12-column desktop grid
Use a 1200px canvas, 48px margins, and 24px gutters.
FAQ
Questions about the grid calculator
Practical details about using the tool and understanding its result.
Keep working
Related tools
Type Scale Calculator
Generate a modular typography scale in pixels and rems from a base size and ratio.
Open toolAspect Ratio Calculator
Choose a screen, social, ratio, or print standard—or enter custom dimensions—then resize without distortion.
Open toolBleed and Safe-area Calculator
Calculate production document size, trim edge, and safe content area for printed artwork.
Open toolFrom one asset to the whole workflow
Keep layout decisions connected to design review and delivery.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.