Skip to content
Technologydesign

Grid Layout Calculator

Column widths for a layout grid, and the width of a span. A span of four columns is wider than four column widths, because it swallows the gutters between them.

Also called: css grid calculator, layout column width.

Column width
78

Each of 12 columns is 78 wide with 24 gutters. A 4-column element spans 384, which is 32% of the content width.

Width of your span
384
Span as a percentage
32%
Content width inside the margins
1,200
Total gutter space
264
Share of width taken by gutters
22%
How this is calculated
Method and background

How this is calculated

Subtract the outer margins and the gutters, then divide what remains by the column count. The detail that catches people is the span: four columns spanning includes the three gutters between them, so it is wider than four times the column width. Getting that wrong is why a layout drifts a few pixels out of alignment at larger spans.

column width divides what is left after margins and gutters; a span includes the gutters it crosses
W
Container width
n
Column count
g
Gutter
k
Columns spanned

Worked examples

Each of these is asserted on every build. If a change to the engine ever moved one of these answers, the build would fail before the page could print it.

a twelve column grid

Container width
1,200
Columns
12
Gutter between columns
24
Outer margin each side
0
Columns to span
4

Column width78

4 * 78 + 3 * 24, which is more than 4 * 78

Open this example

no gutters makes a span a simple multiple

Container width
1,200
Columns
12
Gutter between columns
0
Outer margin each side
0
Columns to span
4

Column width100

boundary

Open this example

Method and limits

What it assumes

  • Equal columns and equal gutters, with no gutter outside the first or last column.

What it deliberately does not model

  • Fluid grids using percentages behave differently at fractional pixel widths.

Formula version 1.0.0 · definition 1.0.0 · United States · Report a problem with this calculator

Frequently asked questions

Why is a four-column span not four column widths?
Because it also covers the three gutters between those columns. The formula adds them back, which is the difference between a grid that aligns and one that does not.