About the Grid System Calculator
This grid system calculator works out the exact width of each column in a layout grid from four numbers: the container width, the number of columns, the gutter between columns and the outer margin. It also lists the width of every possible span (1 column, 2 columns and so on, gutters included), the percentage equivalents for fluid layouts, and CSS Grid code you can paste straight into a stylesheet.
It is built for web and UI designers setting up a 12-column desktop grid in Figma, developers rebuilding a grid in CSS, and print designers dividing a page into columns. Use it to test whether a gutter fits, to see how wide a card spanning four columns will be, or to convert a fixed grid to percentages.
Margins are applied on both sides of the container and gutters only between columns (not on the outer edges), which matches how Figma layout grids and CSS column-gap behave.
With the default inputs, the column width is 78 px. Change any value above to recalculate instantly.
How to use the grid system calculator
- 1Enter the total container or frame width.
- 2Set the number of columns — 12 for desktop, 8 for tablet and 4 for mobile are common.
- 3Enter the gutter width and any outer margin on each side.
- 4Read the column width, then check the span table for card and section widths.
- 5Copy the CSS Grid code or recreate the grid in your design tool.
Formula and method
First the outer margins are removed from the container to get the content width. There are n − 1 gutters between n columns, so the total gutter space is subtracted and the remainder divided equally among the columns.
A block spanning k columns also contains the k − 1 gutters between them, which is why a 6-of-12 span in a 1200px grid with 24px gutters is 6 × 78 + 5 × 24 = 588px, not 600px. Percentages are relative to the content width, which is how a fluid grid with percentage columns and gutters would behave inside the padded container.
- W
- Container width
- m
- Outer margin on each side
- n
- Number of columns
- g
- Gutter width between columns
- k
- Number of columns a block spans
Worked examples
Classic 1200px, 12 columns, 24px gutters
Eleven gutters take 11 × 24 = 264px, leaving 936px for 12 columns: 78px each. A half-width block spans 6 columns and 5 gutters, 6 × 78 + 5 × 24 = 588px.
1440px frame with 80px margins and 32px gutters
Removing 80px each side leaves 1280px. After 11 gutters of 32px (352px), each column is 928 ÷ 12 ≈ 77.33px. A 6-column span is 6 × 77.33 + 5 × 32 = 624px.
960px, 16-column grid with 20px gutters and 10px margins
The content area is 960 − 20 = 940px. Fifteen 20px gutters use 300px, leaving 640px, so each of the 16 columns is exactly 40px.
Frequently asked questions
How do you calculate column width in a grid?+
Subtract both outer margins from the container, subtract the gutters (one fewer than the number of columns), then divide what is left by the number of columns.
What is a standard grid for web design?+
A 12-column grid is the most common on desktop because 12 divides evenly into halves, thirds, quarters and sixths. Many systems use 8 columns on tablet and 4 on mobile with 16–24px gutters.
What is the difference between a gutter and a margin?+
Gutters are the gaps between columns; margins are the space between the outer columns and the edge of the container or screen. Margins are often larger than gutters on wide screens.
Should columns be whole pixels?+
It is not required — browsers handle fractional widths — but whole-pixel columns make design files tidier and avoid blurry edges in some tools. Nudge the container or gutter until the column width is an integer.
How do I build this grid in CSS?+
Use display: grid with grid-template-columns: repeat(n, minmax(0, 1fr)) and column-gap set to your gutter, inside a container with your max-width and side padding. Children span columns with grid-column: span k.