Why do my areas need to be rectangular?

CSS grid-template-areas requires each named area to form a single rectangle (no L-shapes or holes). The validator warns you when this is violated and the CSS skips the areas block until you fix it.

What does the column unit selector do?

It controls grid-template-columns: 1fr makes equal fluid columns, auto sizes to content, minmax(0, 1fr) prevents blowout from long content, and 80px uses fixed-width columns.

Can I use more than 6 area names?

The palette ships with six common names (header, nav, main, sidebar, ads, footer). For more, paint cells then rename them in the copied CSS — grid-template-areas accepts any valid identifier.

Does this work for subgrid?

The output is for top-level grid layout. Subgrid support depends on the parent grid; you'd add `grid-template-columns: subgrid` to a child manually.

Are gaps in px or rem?

The gap slider outputs px for clarity. Convert to rem by dividing by 16 — for example, 12px ≈ 0.75rem.

CSS Grid Generator

Paint named grid areas visually and copy clean grid-template CSS.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use CSS Grid Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Set the number of columns and rows with the sliders.
2
Step 2. Adjust the gap and pick a column unit (1fr, auto, minmax, fixed px).
3
Step 3. Select an area name from the palette, then click cells to paint it.
4
Step 4. Click a painted cell again to clear it; click Clear to wipe the grid.
5
Step 5. Copy the generated grid-template CSS — areas are validated for rectangles.