Grid calculator

Container, columns, gutter → column width and spans

Parameters

Container, px

Columns

Gutter, px

Outer margins, px

Standard: 12 columns, 16–32px gutter, 1140–1440px container. Formula: column = (container − 2×margin − (n−1)×gutter) / n. Span = width of k columns + (k−1)×gutter. Mobile grids: 4 columns/16px gutter; tablet 8. Content needn't span full width — 8/12 columns reads better.

Grid

84.7 px/col

span 1 cols84.7 px

span 2 cols193.3 px

span 3 cols302.0 px

span 4 cols410.7 px

span 6 cols628.0 px

span 8 cols845.3 px

span 12 cols1280.0 px