How do I paint a grid area?

Select an area name from the brushes (or the Eraser), then click and drag across the cells on the grid. The drag always defines a rectangle, which is exactly what grid-template-areas requires, so the painted region is valid by construction.

Why does it warn that an area is invalid?

A named region in grid-template-areas must be a single filled rectangle. If you paint the same name in two places, or paint another name into the middle of it, the region stops being rectangular and the browser will ignore the whole declaration. The tool flags these names so you can erase the stray cells before copying.

Can I make columns different widths?

Yes. Set the column track to a fixed size, or keep equal 1fr tracks and let an area span more columns for a proportional split (for example a sidebar that spans 1 of 4 columns is a 25 percent column). For fully custom tracks, edit the repeat() value in the copied CSS.

CSS Grid Visual Builder — Paint Areas & Export Code

🧩 Drag to Paint Areas

CSS Grid Visual Builder

Pick an area, drag a rectangle on the grid, and export valid grid-template-areas CSS plus the matching HTML — with a live preview and rectangle validation.

Grid size

Columns

Rows

Tracks & gap

Column track

Row track

Gap

Brushes — pick one, then drag on the grid

Paint canvas — drag a rectangle to fill it with the selected brush

CSS

HTML

How the Paint Editor Works

Choose an area name from the brushes (or the Eraser), then click and drag across the cells on the canvas. The drag always defines a rectangle, which is exactly the shape grid-template-areas allows, so the region you paint is valid by construction. Releasing the pointer fills that rectangle with the brush; the colored grid you see is the live preview, rendered with your real column tracks and gap so it is WYSIWYG.

Why Some Areas Get Flagged as Invalid

A named region must be one solid rectangle. If you paint the same name in two separate places, or paint a different name into the middle of an existing one, that region becomes an L‑shape, a donut, or two disconnected blocks — and the browser will then ignore the entire grid-template-areas declaration, collapsing your layout with no obvious error. After every edit this tool recomputes each name's bounding box and checks that every cell inside it matches; any name that fails is listed in the red warning so you can erase the stray cells before copying.

Columns, Rows and Proportional Layouts

The simplest way to build a proportional layout is to keep equal 1fr tracks and let an area span several columns: a sidebar that spans 1 of 4 columns becomes a 25% column, the main area spanning the other 3 becomes 75%. For a fixed‑width rail, switch the column track to Custom size (for example 250px). The exported CSS uses repeat(), so for fully bespoke tracks you can edit that one line after copying — the area names stay correct because they map onto the same column and row count.

Using the Output

Copy the CSS into your stylesheet and the HTML into your markup. Each area becomes a class whose only rule is grid-area: name, so the children slot into place automatically. Empty cells export as a dot (the grid "hole" token). Because the generator is pure client‑side JavaScript with no libraries, it loads instantly, never sends your layout anywhere, and keeps working even offline.