What is grid-template-areas?

It lets you name grid regions and place items by name instead of by row/column index.

Can I rename an area after placing it?

Yes, just edit the text in any cell to rename that area.

Does it generate per-area CSS classes?

Yes, a grid-area rule is generated for each unique area name.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

CSS Grid Template Generator

Design named grid-template-areas visually.

Support

Works Offline

Privacy First

No Login

No API

Columns (3)

Rows (3)

Gap (12px)

Named areas

Type an area name in each cell

Preview

header

sidebar

content

footer

Generated CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";
  gap: 12px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

About the CSS Grid Template Generator

Build a CSS grid layout using named grid-template-areas. Set columns and rows, label each cell, and see a live color-coded preview alongside ready-to-copy CSS for the container and each named area.

Examples

Header/sidebar/content/footer

3x3 named areas

Output

grid-template-areas: "header header header" "sidebar content content" "footer footer footer";

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

CSS Gradient Generator

HTML & CSS

Design linear, radial, and conic gradients visually.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-09 · Runs entirely in your browser