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.

CSS Grid Template Generator

Design named grid-template-areas visually.

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";

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 Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

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

Frequently asked questions

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