Layouts, not snippets

Areas are elements; placement is per breakpoint

Each area you draw is one child element in the exported HTML. It exists at every breakpoint. What changes between breakpoints is where it sits, how big it is, and whether it is rendered at all. That single decision is what lets the export be correct: one set of markup, one base rule, and overrides that only contain differences.

The output is diffed

If your column tracks are the same at 768px as they were at 0px, the 768px media query will not repeat them. The same goes for gaps and for every individual item's placement. You get the smallest CSS that produces the layout you drew, which is also the CSS that is easiest to read six months later.

Named areas versus line numbers

grid-template-areas can only describe non-overlapping rectangles with ident-safe names. When your layout satisfies that, the export uses it, because the resulting CSS is a literal picture of the page. When it does not — overlapping items, or a name with a space in it — the export switches to explicit grid-area line numbers and says so above the code. You can force either mode.

Tailwind v4 output

The Tailwind tab emits real responsive utilities, not a single grid-cols-3. Track lists become arbitrary values with underscores where spaces would be, breakpoints map onto Tailwind's own screens where they match and min-[900px]: variants where they do not, and per-item placement uses col-start / row-end utilities with the same diffing as the CSS output.

Your layout lives in the URL

There is no account and no save button. The full document is encoded into the address bar as you work, so a link is a complete, editable layout. Copy link, paste it in a pull request.

Who makes this

One developer, working on it directly and by choice not by name. There is no company behind the site, no funding round and no roadmap meeting — which is the honest reason it does one thing properly rather than ten things adequately. Every layout, every note on a pattern page and every line of the generator was written by hand for this site, and every tool page carries a byline with the date its content last changed. That date is the same one the sitemap reports, because both read the same table.

Two of the tools exist because Search Console showed the site being found for queries it had no page for. The pattern generator and the Tailwind shadow generator were built to answer those searches properly rather than let a loosely related page absorb them.

The tools are free and stay free. Nothing here needs an account, nothing you draw is uploaded, and no analytics load at all until you accept them — see the privacy page for exactly what that means.

How the layouts are checked

Every one of the 46 layout patterns is validated on each build by npm run validate, which is a real script in the repository rather than a claim on a page. It checks the things grid-template-areas actually enforces: that each row of an area map has exactly as many cells as there are column tracks, that the map has as many rows as row tracks, that every area is placed at some breakpoint, and that each area is a solid rectangle rather than an L-shape.

That check exists because of a shipped bug. The magazine layout defined its desktop columns as repeat(12, 1fr) — one entry — against a twelve-cell area map, so the export emitted single-cell rows for a twelve-column grid. The declaration was invalid, browsers dropped it silently, and the pattern looked correct in the editor while being broken on the page. A second script, research/audit-css.py, catches the equivalent problem in the stylesheets: a shared control defined inside one tool's CSS file, which renders unstyled everywhere else.

Corrections

If a pattern generates CSS that does not do what this site says it does, that is a bug and it gets fixed rather than argued with. Browser-support claims on these pages are stated with the version numbers they apply to so they can be checked against caniuse rather than taken on trust, and anything that turns out to be wrong is corrected in place.

Keyboard

Arrow keys nudge the selected area, Shift with arrows resizes it, Delete removes it, Escape deselects, and Cmd/Ctrl+Z undoes. The preview-width handle on the ruler is focusable and moves with the arrow keys too.