CSS grid generator
Turn a text layout sketch into a real CSS grid with named areas.
CSS grid generator
Paste a rough sketch of a page layout and this tool turns it into working CSS grid code. Write each row of the layout on its own line, and repeat the same word across cells to mark a named region — "header header" on one line, "nav main" on the next, "footer footer" on the last describes a classic three-row layout with a full-width header and footer. The tool reads the repeated names as grid areas and generates the matching grid-template-areas declaration automatically.
The options control the rest of the generated CSS. Set the gap between cells in pixels, and optionally give explicit column widths or row heights using any valid CSS track size — fr units, auto, or minmax(); leave either field empty and the tool spaces the tracks evenly instead. Turn on per-area rules to get a ready-made grid-area declaration for every named section, using a class prefix you choose, so "header" becomes .grid-header out of the box. A responsive toggle adds a max-width media query that collapses the whole layout to a single column for narrow screens, and an HTML toggle appends a matching markup skeleton so you can see the structure alongside the CSS.
If two cells with the same name don't form a solid rectangle — an L-shape or a name that skips a cell — real CSS grid can't render that area correctly, so the tool flags it directly in the output as a warning comment instead of generating invalid-looking rules silently. Line endings from any operating system are handled the same way, and the live tally below the output tracks how many layout rows, named areas and characters the generated CSS contains.
Everything runs locally in your browser; the layout you sketch and the CSS you get back are never sent anywhere. Copy the result, download it as a .txt file, or send the output straight into another tool such as the CSS formatter to tidy the indentation further.