CSS Grid Layout Builder

The CSS Grid Layout Builder turns the trickiest part of CSS Grid — grid-template-areas — into something you can see and paint. Instead of counting line numbers or guessing at grid-column: 1 / 3, you name regions like header, sidebar and main, then drag across the grid to place them. The tool writes the exact grid-template CSS for you, keeps every area a valid rectangle, and renders a live preview using real CSS Grid so what you see is what your browser will paint. It is built for front-end developers laying out app shells, dashboards and landing pages, and for anyone learning Grid who wants instant, correct output.

How it works

A CSS Grid layout is defined by three things: the column tracks, the row tracks, and an optional area map. This builder gives you direct control of all three.

Each column and row has its own little track editor where you choose a sizing function — fr for proportional space, px for a fixed size, auto to fit content, min-content / max-content for intrinsic sizing, or minmax(floor, ceiling) for responsive tracks that stay within bounds. Add or drop tracks with the +col and +row controls and the painted area map resizes with them.

The grid itself is a paintable canvas. Select an area chip, then click and drag across cells to assign them. Behind the scenes the builder runs a rectangle check on every paint: grid-template-areas is only valid when each named area forms a solid, filled rectangle, so if you accidentally make an L-shape it flags the problem in red and pauses the preview until you fix it. When everything is valid it emits the canonical block — display: grid, your grid-template-columns, grid-template-rows, a neatly aligned grid-template-areas map, and a gap — plus per-area grid-area rules and matching HTML. Everything is computed locally; your layout is auto-saved in this browser and never uploaded.

Example

Say you want the classic app shell: a full-width top bar, a fixed 240px sidebar next to a fluid content column, and a slim footer. Set column one to 240px, column two to 1fr; set the top and bottom rows to auto and the middle row to 1fr. Paint header across the top, sidebar down the left, main over the rest, and footer along the bottom. The builder produces:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  gap: 12px;
}
.layout > .header  { grid-area: header; }
.layout > .sidebar { grid-area: sidebar; }
.layout > .main    { grid-area: main; }
.layout > .footer  { grid-area: footer; }

Drop that into your stylesheet, give your four child elements the matching class names, and the layout is done. Change a track from px to minmax(200px, 1fr) and the sidebar becomes responsive without you rewriting a single line of placement.

Every value above is generated and validated in your browser — no figures or layouts are ever sent to a server.