Grid Layout Calculator
Works out the column widths of a layout grid.
Column width
— px
Share sends a link that reopens these numbers. Copy details pastes the full breakdown as a list.
Column as a share of the container — %
Content width — px
Width by column span
Reading this —
The formula
column = (container − 2 × margin − (columns − 1) × gutter) ÷ columns span = n × column + (n − 1) × gutter
There is one fewer gutter than there are columns.
What to watch out for
In CSS, repeat(12, 1fr) with a gap does this sum for you. The numbers are useful for mock-ups and image sizes.
Frequently Asked Questions
How wide is a column in a 12-column grid at 1200 px?
74.00 px, with 24 px gutters and 24 px margins.