CSS Grid Template Areas Visualizer — Free Layout Snippet

CSS Grid offers several ways to place items into a grid — explicit row/column line numbers, the grid-column/grid-row shorthand, or automatic placement — but the most human-readable of them all is grid-template-areas. It lets you literally draw your page layout as ASCII art inside your CSS, naming regions like header, sidebar, main, and footer, then assign each grid item to one of those names with a single grid-area declaration. This snippet turns that textual syntax into an interactive visual builder: paint cells with named areas, and watch both the rendered layout and the exact generated CSS string update together in real time.

The syntax: a grid of quoted strings

grid-template-areas takes one quoted string per grid row, with each string containing space-separated area names for that row's columns — e.g. "header header" "sidebar main" "footer footer" describes a 3-row, 2-column grid where the header spans both columns, the sidebar and main content sit side by side, and the footer spans the full width again. Every string must have the same number of space-separated tokens (representing equal column counts), and a cell can be marked with a single period . to leave it explicitly empty. This demo's renderCode() function builds exactly this string from a 2D array of area names, joining each row's tokens with spaces and wrapping each row in quotes — precisely mirroring what you'd hand-write in a stylesheet.

Why non-rectangular spans are the interesting part

The real power of named areas is that a single name can occupy a non-rectangular-looking token pattern in the ASCII grid as long as the actual occupied cells form a rectangle — repeating header across two columns in one row makes it span both columns as one grid item. This is fundamentally different from manually computing grid-column: 1 / 3 line numbers; the area name IS the placement instruction, self-documenting the intent directly in the CSS. The browser's grid layout algorithm validates that each named area's cells form a valid rectangle at parse time — an invalid, non-rectangular shape (like an L-shape) is simply ignored as invalid syntax.

Connecting the template to actual elements

Once grid-template-areas is declared on the container, each child element opts into a named region with a single line: .header { grid-area: header; }. This is dramatically more readable in a real stylesheet than remembering which numbered line range corresponds to the header versus the sidebar, especially as a layout gains and loses regions across responsive breakpoints — a well-known pattern is redefining grid-template-areas entirely inside a @media query to restack a sidebar below the main content on narrow viewports, without touching any of the child elements' grid-area declarations at all.

How this demo's painter maps to the syntax

The paint grid in this demo is backed by a plain 2D JavaScript array (grid[y][x]), initialized by defaultGrid() to a sensible header/sidebar/main/footer starting layout. Clicking an area chip sets activeArea, and clicking-and-dragging across cells (using mousedown + mouseenter + a global mouseup listener to track the drag gesture) calls paint(x, y), which writes the active area name into that cell of the array. Every paint triggers a full re-render: the preview grid's gridTemplateAreas style property is set directly from the generated string, and a matching .preview-area element is created for each unique area name found in the grid, with el.style.gridArea = name placing it. This closes the loop — the same data structure drives the interactive painter, the live rendered preview, and the text output, so what you see is guaranteed to match what the generated CSS actually does.

Why this matters for 2025/2026 layout work

Even with subgrid and container queries expanding what Grid can do, named template areas remain the clearest way to express page-level and component-level layout intent to future maintainers, designers reading a CSS file, or an AI coding assistant trying to understand a layout's structure from source alone. Being able to visually prototype an area layout before committing it to a stylesheet — and see immediately whether a given ASCII pattern is even valid — removes a common trial-and-error step from building responsive, semantically named grid layouts.