(07)Digital · Tools
Spacing & Grid Calculator
Design a layout grid: enter container width, columns, gutter and margin to get exact column widths, a visual preview and ready CSS.
- Free forever
- No sign-up
- Runs in your browser
Presets
px
px
px
px
Column width
74.5px
Content1280px
Gutters264px
Spans columns → width, click to copy
Good to know
How it works
Column width = (container − 2 × margin − (columns − 1) × gutter) ÷ columns. Spans of several columns include the gutters between them.
Everything happens on your device. Nothing you enter is uploaded, stored or tracked.