All 141 tools / Layout, grids and spacing
Plan responsive breakpoints from the widths where your layout breaks, with ready CSS and fluid clamp() rules
Breakpoint plannerFreeFor 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.
contentWidths: [560,640,980,1280] deviceTargets: [390,768,1024,1440] minMeasure: 45 maxMeasure: 75 fontSize: 16
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Breakpoints chosen from content (measure 45 to 75 characters at 16px, about 0.5em per character): 560px, container max 512px. content: you reported the layout needs to change here 640px, container max 592px. content: you reported the layout needs to change here 648px, container max 600px. derived: one column reaches the 75 character maximum (600px); wider than this, add structure or stop growing 792px, container max 744px. derived: 2 columns each at least 45 characters wide (360px) fit 980px, container max 932px. content: you reported the layout needs to change here 1176px, container max 1128px. derived: 3 columns each at least 45 characters wide (360px) fit 1280px, container max 1232px. content: you reported the layout needs to change here Close: 640px and 648px are 1.25% apart. Pick one; two layout changes this close force the design to be right in a window only 8px wide. Close: 1176px and 1280px are 8.84% apart. Pick one; two layout changes this close force the design to be right in a window only 104px wide. Device 390px: 390px falls between breakpoints and is covered by the base (below the first breakpoint) layout. ... full output on the tool page
What you get
Breakpoints, container max-widths, CSS, fluid type and spacing clamps, and device-target checks
What it cannot do
You supply the widths where the layout fails; device targets are only checked, never used to create breakpoints.
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 plan_breakpoints. 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/breakpoint-planner -H 'content-type: application/json' -d '{"contentWidths":[560,640,980,1280],"deviceTargets":[390,768,1024,1440],"minMeasure":45,"maxMeasure":75,"fontSize":16}'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
- Proportion calculator
Work out the missing side of a golden, root-2 or custom ratio and split a container at that ratio
- 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