Toronto —Let’s talk

—/Tool

Layout grid calculator that keeps every number on the grid.

Columns, gutters and margins for any frame, checked against a 4 or 8 point base unit.

When the maths doesn’t divide, it finds the nearest grid that does.

01/Your grid

px
Base unit: every value divisible by
Solve for

All values are CSS pixels, the same as Figma at 1×. The arrow keys step by the base unit.

02/Column width

On the 8pt grid

80px

(1440 − 2 × 64 − 11 × 32) ÷ 12 = 80

Frame
1440
180 × 8
Column
80
10 × 8
Gutter
32
4 × 8
Margin
64
8 × 8

03/Preview

  • Column 80
  • Gutter 32
  • Margin 64
  • Lines every 16px

04/Other clean fits

12 col · 1440px · ÷ 8

05/Spans

Columns plus the gutters between

  1. 0180
  2. 02192
  3. 031/4304
  4. 041/3416
  5. 05528
  6. 061/2640
  7. 07752
  8. 082/3864
  9. 093/4976
  10. 101088
  11. 111200
  12. 12Full1312

06/Export

.grid {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 64px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* 80px each at 1440px */
  column-gap: 32px;
}

07/About

Formula
2 × margin + n × column + (n − 1) × gutter = frame
Base units
4, 5, 6, 8, 10, 12 or 16 px
Export
CSS grid, Tailwind classes, Figma layout grid
Privacy
Calculated in your browser, nothing stored

How the grid calculator works

A column grid comes down to five numbers: the frame width, the number of columns, the column width, the gutter between columns and the margin on each side. Fix all but one and the last one follows:

frame = 2 × margin + columns × column + (columns − 1) × gutter

Pick which value to solve for and the calculator works it out. It then checks every value against your base unit, so type, components and spacing share one rhythm. A column 84.67px wide will never line up with an 8px spacing scale, and every card, image and text block that spans it will be a fraction of a pixel off.

Why some grids can never land on 8

Take a 1440px frame with 12 columns and 24px gutters. Divide everything by 8 and the frame becomes 180 units, the gutters 3 units each, and the equation reads 180 = 2m + 12c + 33. The right side is always odd and 180 is even, so no column width or margin can make it work. Here the gutter has to be a multiple of 16, or the base unit has to drop to 4. The clean fits list finds those combinations for you, closest to what you typed first.

Choosing a base unit

  • 8 for most product UI and websites. It divides common screen sizes and scales cleanly at 1.5× and 2×.
  • 4 for dense interfaces, icons and type details, or when 8 leaves no clean fit.
  • 6 and 12 suit 12- and 24-column grids, since they share the same factors.
  • 5 and 10 for systems measured in round numbers.

How to use it

  1. Set the frame width, or pick a common device width.
  2. Choose the number of columns and your base unit.
  3. Choose which value to solve for, then enter the other two.
  4. If the result is off the grid, click a clean fit to use it. Changed values show in full strength.
  5. Copy the grid as CSS, as Tailwind classes, or as values for a Figma layout grid.

Note

Spans are the width of several columns plus the gutters between them, the width a card or image takes when it covers them. If the column and gutter are on the grid, every span is too.