All 141 tools / Layout, grids and spacing
Work out the missing side of a golden, root-2 or custom ratio and split a container at that ratio
Proportion calculatorFreeFor designers and developers
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You type in numbers or values.
width: 1200 ratio: golden orientation: landscape
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Ratio: golden (1.618:1), landscape
Box: 1200 x 741.641 (height calculated)
Split of 1200: major 741.641 (61.803%), minor 458.359 (38.197%)
CSS: .split { display: grid; grid-template-columns: 1.618fr 1fr; }
At width 1200, heights by ratio: 1:1 = 1200, 5:4 = 960, 4:3 = 900, 3:2 = 800, golden = 741.641, root-2 = 848.528, 16:10 = 750, 16:9 = 675, 2:1 = 600, 21:9 = 514.286
Sources: Graphic Design Solutions (golden section as a division of a line); Samara, Making and Breaking the Grid and Müller-Brockmann, Grid Systems in Graphic Design (proportion and format). Root-2 is the ISO 216 A-series ratio: halving a sheet along its long side keeps the same shape. Whether any ratio looks better is a convention, not a proven rule.
What you get
The missing side, major and minor split in fr and px, ten ratio heights, and crop sizes for a source image
What it cannot do
Arithmetic only; no ratio is shown to be more beautiful than another, and crops are centred.
Who it is for
- Designers
- Developers
Free and Pro
| Free | 25 runs a day per IP address. |
|---|---|
| Pro | No daily limit, 300 requests a minute. |
Use it from your assistant
The tool is called calculate_proportion. 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/mcpcurl -X POST https://designers.allthepossibles.com/api/proportion-calculator -H 'content-type: application/json' -d '{"width":1200,"ratio":"golden","orientation":"landscape"}'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
- Grid builder
Build a column or modular grid from a page width, with every span width, CSS and Figma layout settings
- Spacing scale
Generate a set of spacing tokens from a base unit, as a linear ladder, a modular scale or your own steps
- Breakpoint planner
Plan responsive breakpoints from the widths where your layout breaks, with ready CSS and fluid clamp() rules
- Proximity and alignment check
Find near-miss alignments, uneven gaps and orphaned boxes in a layout from box coordinates or markup
- Spacing audit
Detect the spacing base unit in a stylesheet, list off-grid values and propose a cleaner scale
- Navigation depth
Analyse a navigation tree for depth, breadth, one-child branches, naming collisions and orphan pages