Layouts, not snippets
Most grid generators are single-shot: you arrange some boxes, copy a block of CSS, and re-do the whole thing by hand for every other screen size. This one treats the layout as one object that has a different shape at each width.
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.
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.