CSS Grid Template Generator
Design named grid-template-areas visually.
Named areas
Type an area name in each cell
Preview
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 areasOutput
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
Read more
- A practical guide to CSS Grid vs Flexbox
Both are layout systems, but they solve different problems. Here's how to decide which one fits, with real examples.
Comments
No login needed. Comments appear after a quick review.
Loading comments…
Version 1.0.0 · Updated 2026-08-09 · Runs entirely in your browser