Designers
ToolsDocsProAll the Possibles

All 141 tools / Layout, grids and spacing

Build a column or modular grid from a page width, with every span width, CSS and Figma layout settings

Grid builderFreeFor designers and developers

10 min

saved on a typical run. Our estimate, against working out column widths, offsets and spans by hand.

Before: what you give it

The example input, as typed in. You type in numbers or values.

width: 1440
columns: 12
gutter: 24
margin: 48
rows: 6
height: 900
baseline: 8

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Grid: 12 columns in 1440px, 48px margins, 24px gutters
Column width: 90px

Column x positions (left edge):
1: 48  2: 162  3: 276  4: 390  5: 504  6: 618  7: 732  8: 846  9: 960  10: 1074  11: 1188  12: 1302

Span widths:
1 col = 90px  2 col = 204px  3 col = 318px  4 col = 432px  5 col = 546px  6 col = 660px  7 col = 774px  8 col = 888px  9 col = 1002px  10 col = 1116px  11 col = 1230px  12 col = 1344px

CSS (fluid): .grid { max-width: 1440px; margin-inline: auto; padding-inline: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; box-sizing: border-box; }
CSS (fixed): .grid { width: 1440px; padding-inline: 48px; display: grid; grid-template-columns: repeat(12, 90px); column-gap: 24px; box-sizing: border-box; }
Figma: Layout grid, Columns, count 12, Stretch, margin 48, gutter 24

Modular variant: 6 rows by 12 columns = 72 modules of 90 x 114px
... full output on the tool page

What you get

Column width, x positions, span widths 1 to N, fixed and fluid CSS, Figma settings and pixel-rounding flags

What it cannot do

Pure arithmetic; it rejects layouts where the columns do not fit, and the baseline fit is a convention.

Who it is for

  • Designers
  • Developers

Free and Pro

Free25 runs a day per IP address.
ProNo daily limit, 300 requests a minute.

What each plan includes

Use it from your assistant

The tool is called build_grid. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/grid-builder -H 'content-type: application/json' -d '{"width":1440,"columns":12,"gutter":24,"margin":48,"rows":6,"height":900,"baseline":8}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in layout, grids and spacing

All layout, grids and spacing tools