Build a CSS grid visually: set columns, rows and gaps, drag to draw named areas, and copy grid-template-areas CSS, line-number CSS or Tailwind with the HTML.
grid-template-areas is the most readable way to lay out a page, and the easiest to get subtly wrong: one row with a missing cell, or an L-shaped area, and the browser silently ignores the whole declaration. Here you draw the areas on a real grid with the mouse or a finger, and the CSS is written for you, aligned and valid.
1fr, 200px, 25%, auto, minmax(150px, 1fr) or fit-content(300px). Up to 12 of each.The preview is the layout itself, not a picture of it: the same track sizes and gaps, rendered by your browser. Resize the window and fr and minmax() tracks respond exactly as they will on your site.
The default preset has columns 200px 1fr 200px, rows auto 1fr auto and a 16px gap. The areas come out as three padded lines, "header header header", "nav main aside" and "footer footer footer", followed by one grid-area rule per class. When every track is the same, the list is shortened, so four 1fr columns become repeat(4, 1fr). In Tailwind mode the gap of 16px maps to gap-4, and odd tracks use arbitrary values such as grid-cols-[200px_1fr_200px].
Areas cannot overlap or have holes in grid-template-areas, so a drag that crosses an existing area is refused and names the area in the way. A track like 1 fr (with a space) or minmax(1fr, 2fr) (a flexible minimum, which CSS does not allow) is outlined in red and listed under the grid; the preview meanwhile treats it as 1fr. Names follow CSS identifier rules, so 1col gets “"1col" can’t be an area name: use letters, digits, - and _, starting with a letter.” Removing a column or row shrinks the areas that spanned it and drops any that disappear entirely.
Start from
Columns (3)
Rows (3)
Layout: drag across empty cells to add an area, click an area to rename or delete it
HTML