Generator Tools

CSS Grid Template Areas Generator

Build CSS grid-template-areas visually. Paint named areas onto a grid and copy ready-to-paste CSS for the container and per-area selectors.

Layout presets

Paint the grid

3 rows, 3 columns, 9 cells

Click a cell to paint it with the active area. Hold and drag to paint multiple cells. Hold Shift or right-click to clear cells.

Columns (3)

Col 1

Col 2

Col 3

Rows (3)

Row 1

Row 2

Row 3

Column gap (px)Row gap (px)Preview height (px)

Named areas

Click an area to select it as the active paint color. Rename or remove areas. Names must start with a letter or underscore and contain letters, digits, hyphens, or underscores.

Used in grid

New area name

Live preview

Renders with the exact CSS the tool emits

header

sidebar

main

footer

CSS

.grid {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 72px 1fr 64px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 12px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

HTML markup

<div class="grid">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

grid-template-areas value only

"header header header"
"sidebar main main"
"footer footer footer"

Each line is one row, wrapped in quotes. Use a single dot for an empty cell. Every row must contain the same number of cells.

Also includes the full container CSS above with grid-template-columns, grid-template-rows, gap, and grid-area selectors per named area.

grid-template-areas rules at a glance

Every named area must form a single contiguous rectangle.
Every quoted row must have the same number of cell tokens.
Use a single period (.) for an empty cell with no name.
Names are CSS custom identifiers: start with a letter or underscore.
Repeating a name across adjacent cells merges them into the same area.
Place a child element into a named area using grid-area: name;.

/* Container only (no per-area selectors) */
.grid {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 72px 1fr 64px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 12px;
}

How to use

Pick a starting preset (Holy Grail, Dashboard, Blog post, Two column, Single column, or Media object) or start from scratch.
Adjust the number of columns and rows and edit each track's value and unit (fr, px, %, auto, min-content, max-content).
Add named areas with the Add area button, then click the Use button next to the area you want to paint.
Click cells to paint them with the active area. Hold and drag to paint multiple cells. Hold Shift or right-click to clear cells back to a dot.
Review the live preview, then copy the full CSS, the HTML scaffold, or just the grid-template-areas value.

About this tool

CSS Grid Template Areas Generator is a visual builder for the grid-template-areas property. Define how many rows and columns your layout has, set track sizes in fr, px, %, auto, min-content, or max-content, then click and drag across cells to paint each one with a named area. The tool produces a valid grid-template-areas value (every row wrapped in quotes, every row the same length, dots used for empty cells), a full container block with grid-template-columns, grid-template-rows, and the matching gap, and a per-area class selector for each named area so you can paste a complete responsive layout straight into your stylesheet. A live preview renders a real CSS grid using the exact values the tool emits, so what you see is exactly what gets copied. The generator validates each named area against the CSS rule that every area must form a contiguous rectangle, flags duplicate or invalid area names, and shows a warning when the painted shape would be rejected by the browser. Useful for frontend developers prototyping Holy Grail layouts, dashboards, blog templates, sidebars, media objects, and any layout where named areas are clearer than numeric grid line placement. Includes built-in presets for common page structures and an HTML scaffold so the markup matches the CSS. Everything runs locally in your browser. The values you build are never sent to a server.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Grid Template Areas Generator

How to use

About this tool

You may also like

CSS Grid Generator

CSS Flexbox Generator

CSS Transform Generator

HTML Form Generator

Fluid Type Scale Generator

CSS Clamp Generator