Gridwork — Layout Grids, Breakpoints & Spacing

Gridwork — Layout Grids, Breakpoints & Spacing — a premium, 100% offline digital tool by Aceplore. Runs entirely in your browser: no accounts, no subscriptions, your data never leaves your device.

A private, offline solver for layout geometry — the exact column a container implies, the residual that misaligns your rail, and the span width that is not four times the column — 31 tools in one, and a grid that does not close says so instead of rounding it away.

31 built-in tools in one app. A grid list with container, columns, gutter, margin and unit, each drawn to scale in SVG with every measurement labelled; a column solver that reports the EXACT column to six decimals, the rounded one, and the residual at floor, nearest and ceiling — because that residual is the misaligned rail nobody can explain — and a container solver that runs the same arithmetic backwards from a whole-pixel column; a closure check that sets columns × width + gutters × gutter + margins against the container and prints the difference rather than absorbing it; breakpoints with their own columns, gutter and margin, a table of every one against the column it produces, and a fluid band between two breakpoints with the clamp() expression it implies; gutters and margins as a share of the column across breakpoints; named regions of the grid, the pixel width a span resolves to, every span from 1 to N, and a nesting view for a grid inside a region; a spacing scale on a baseline unit you set, every step named, and a rhythm view that FLAGS the steps that do not land on the baseline rather than rounding them; aspect-ratio boxes and a ratio table; components with minimum widths against the spans that satisfy them, and a fit matrix showing exactly which breakpoints each one breaks in; a density view of content against whitespace, a measurable SVG overlay, and a CSS generator producing grid-template-columns, gap and padding; plus CSV and .css exports, a JSON backup, and a Method page holding every formula with a worked example.

Solve column. (1200 − 11×24 − 2×32) ÷ 12 = 872 ÷ 12 = 72.666667. The rounded column and the residual at floor, nearest and ceiling sit beside it, because a 4px over-fill is what pushes your right-hand rail off the grid.

Breakpoint table. Each breakpoint carries its own columns, gutter and margin, and the table shows the column each one produces and whether it closes. A breakpoint whose minimum width falls below the one before it is flagged rather than sorted away.

Spacing scale. A 4pt or 8pt scale, or one you define, with every step named and its value shown. Steps that do not land on the baseline unit are FLAGGED — not rounded, because rounding them is how a scale silently stops being a scale.

What's included:

• Gridwork.html
• Quick-Start-Guide.html
• How-To-Use-Guide.html
• README.txt
• LICENSE.txt

Includes a personalized welcome wizard, an interactive guided tour, a ⌘K command palette, light/dark themes with 8 accents, and one-click JSON backup & restore.

Gridwork is a specification, costing and record-keeping tool for design and production work. Every figure it reports is computed by a stated formula from the sizes, prices, counts and rates YOU enter, and every figure carries its UNIT, because px, pt, mm, bytes, milliseconds and dpi are different quantities and confusing them is the classic failure in this field. Where a geometry has to close — a grid against its container, a proration, a coverage matrix — it is reconciled rather than rounded, and a disagreement is reported instead of absorbed. Where a rule comes from a published standard or an industry convention, the standard is named and its parameters are yours to change; where a figure rests on something you assumed rather than measured, it is labelled an assumption at the point of use. Nothing here is a guarantee of a passed press check, a performance score, an approved brand or an available name, and none of it is legal advice — trademark, licensing and accessibility obligations differ by country and by contract, and availability and registration must be confirmed with the registries and rights holders themselves. You are solely responsible for what you send to press, ship to a browser or put your name to.