CSS Grid Generator
Build a grid visually — set your column and row tracks (fr, px, auto or minmax), pick an area name, then click or drag across the preview to paint it. The tool writes the grid-template-areas CSS and a matching HTML skeleton for you. Everything runs in your browser.
About this tool
grid-template-areas is the most readable way to define a CSS grid layout: each row is a quoted string, each word names the area a cell belongs to, and a . marks an empty cell. Every named area must form a rectangle — the tool validates this live and warns you before the CSS would be invalid. Track sizes support fr (a fraction of free space), fixed px, auto, and minmax(min, max) for responsive tracks.
Nothing you build here leaves the page — there is no server, no upload, and no tracking of tool inputs.