Page and CSS grid column calculator

Enter a width, a column count, a gutter and a margin, and get the width of a column, of every span, and the CSS for it. Pixels for screens; millimetres or inches for print.

Column width

74 px

per column · 1,152 px of content inside the margins

1,200 px minus two 24 px margins leaves 1,152 px. Taking out 11 gutters of 24 px leaves 888 px for 12 columns: 74 px each (4.625 rem).

Every span

The width of an element spanning k columns, including the gutters inside it, and its share of the content width for fluid layouts.

Span	Width	rem (at 16px)	Of content
1 column	74 px	4.625 rem	6.4236%
2 columns	172 px	10.75 rem	14.9306%
3 columns	270 px	16.875 rem	23.4375%
4 columns	368 px	23 rem	31.9444%
5 columns	466 px	29.125 rem	40.4514%
6 columns	564 px	35.25 rem	48.9583%
7 columns	662 px	41.375 rem	57.4653%
8 columns	760 px	47.5 rem	65.9722%
9 columns	858 px	53.625 rem	74.4792%
10 columns	956 px	59.75 rem	82.9861%
11 columns	1,054 px	65.875 rem	91.4931%
12 columns	1,152 px	72 rem	100%

CSS

Fluid: columns share whatever width is available, up to the maximum

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  max-width: 1200px;
  padding-inline: 24px;
  margin-inline: auto;
  box-sizing: border-box;
}

Fixed: exactly these column widths

.grid {
  display: grid;
  grid-template-columns: repeat(12, 74px);
  column-gap: 24px;
  width: 1152px;
  margin-inline: auto;
}

How to use it

For a web layout, enter the maximum width of your container in pixels, the number of columns, the gutter between columns and the margin (padding) on each side. For print, choose millimetres or inches and enter the page's trim width with its outer margins. The span table then gives the width of anything that spans one or more columns, and the CSS blocks give a grid you can paste in.

The formula

content = width − 2 × margin
column = (content − (columns − 1) × gutter) ÷ columns
span(k) = k × column + (k − 1) × gutter
percent(k) = span(k) ÷ content × 100

The one subtlety is the gutter count. Twelve columns have eleven gaps between them, not twelve, as long as the outer margins are handled separately. Some grid systems instead put half a gutter on each side of every column, which gives twelve gutters and a half-gutter at each edge. Both are valid; this page uses the first, which is how CSS column-gap works.

A worked example

The default is a 1200px container with 24px margins, 12 columns and 24px gutters. The content width is 1200 − 2 × 24 = 1152px. Eleven gutters take 264px, leaving 888px, and 888 ÷ 12 = 74px per column. A half-width element spans 6 columns: 6 × 74 + 5 × 24 = 564px, which is 48.96% of the content width, not 50%, because the gutter in the middle belongs to neither half. That is exactly the arithmetic a percentage-based layout gets wrong when it assumes half is 50%.

Common grids

Grid	Columns	Gutter	Margin	Column
Classic 960 grid	12	20px	10px	60px
1200px, 12 columns	12	24px	24px	74px
1280px, 12 columns	12	32px	32px	72px
1440px, 12 columns	12	24px	72px	86px
Tablet 768px, 8 columns	8	16px	32px	74px
Phone 375px, 4 columns	4	16px	16px	73.75px

These are illustrative combinations, not standards; only the 960 grid is a widely published system in its own right. Design systems choose their own.

Pixels, rem and print units

CSS pixels are not device pixels: one CSS pixel is defined as 1/96 of an inch, and high-density screens draw each one with several physical pixels. The rem column assumes the browser's default 16px root font size; if a visitor has changed their default, rem-based layouts scale with it, which is the point of using rem. For print, 1 inch is exactly 25.4 mm, and CSS accepts mm and in directly in print stylesheets.

Where this stops being reliable

Fractional pixels. When the column width is not a whole number, a fixed-pixel grid will be rounded differently by different browsers. A fluid grid with fr units handles it without visible error.
Scrollbars. A container set to the full viewport width loses the width of a vertical scrollbar on systems that show one. Set the grid on a container, not the viewport.
Asymmetric margins. Book pages with different inside and outside margins have the same column width as the average, but the grid is not centred.
Baseline grids. Vertical rhythm is a separate calculation based on line height; this page handles columns only.

Common questions

How do I calculate the width of a grid column?

Subtract the two outer margins from the total width to get the content width. Subtract one gutter for every gap between columns, which is one fewer than the number of columns. Divide what is left by the number of columns. For 1200px with 24px margins, 12 columns and 24px gutters: 1200 − 48 = 1152; 1152 − 11 × 24 = 888; 888 ÷ 12 = 74px.

Why use minmax(0, 1fr) instead of just 1fr?

A plain 1fr track has an automatic minimum size, which is the minimum content width of whatever is in it. A long word, a wide image or a code block can then force one column wider than the others and break the grid. minmax(0, 1fr) sets the minimum to zero, so every column stays exactly equal and the content wraps or overflows instead.

Why 12 columns?

Twelve divides evenly into halves, thirds, quarters and sixths, so the same grid supports two-, three-, four- and six-up layouts. That flexibility, not any rule, is why 12 became the default in design systems and CSS frameworks. Print designers often use fewer, and small screens usually collapse to 4.

What should the gutter be?

There is no single right answer. Common screen gutters are 16 to 32px, often matching the spacing scale used elsewhere in the design, and they usually shrink on small screens. In print, gutters are often set to the leading of the body text, or a round number like 4 or 5 mm. The important thing is consistency.

Does this work for print layouts?

Yes. Switch the unit to millimetres or inches, enter the page width, the outer margins and your gutter, and the arithmetic is identical. For a spread or a page with different inside and outside margins, enter the average of the two margins; the column width is the same, only the position shifts.