.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 64px 1fr 48px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 12px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}You Might Also Like
CSS Grid Builder — Visual Grid Layout Generator
About this tool
What is the CSS Grid Builder?
The CSS Grid Builder is a visual, interactive tool for designing CSS grid layouts without memorizing complex syntax. CSS Grid is the most powerful layout system available in CSS — it handles both rows and columns simultaneously, enabling complex page structures like dashboards, magazine layouts, and multi-zone application shells that would be cumbersome or impossible with Flexbox alone. Despite its power, CSS Grid has one of the steepest syntax curves of any CSS feature. Properties like grid-template-columns, grid-template-rows, grid-template-areas, grid-column, grid-row, fr units, minmax(), repeat(), and the alignment system (justify-items, align-items, justify-content, align-content, justify-self, align-self) form an intimidating vocabulary. This tool eliminates that friction. The canvas renders a real CSS Grid — not a simulation — so the live preview is pixel-accurate. Drag across cells to create a named area in seconds. The areas panel lists all named regions and lets you rename them by double-clicking. Column and row track inputs accept any valid CSS value including fr, px, %, auto, minmax(), repeat(), and fit-content(). The code output produces five export formats: clean CSS with grid-template-areas and child grid-area rules, SCSS with $variables for gaps, Tailwind HTML with grid-cols, col-span, and row-start utility classes, a complete React component with inline styles, and a standalone HTML file ready to open in a browser. Six presets cover the most common layout patterns: Holy Grail (header + two sidebars + main + footer), Sidebar, 3-Column, Dashboard with stat cards, Blog with sidebar, and a Card Grid. All processing is 100% client-side — no data leaves your browser.
Features
- Drag-to-create named areas on a live CSS grid canvas — see the real grid, not a simulation
- 6 layout presets: Holy Grail, Sidebar, 3-Column, Dashboard, Blog, Card Grid
- Column and row track editors — add, remove, and set any valid CSS track size (fr, px, %, auto, minmax)
- Independent column-gap and row-gap sliders
- justify-items and align-items alignment controls for item placement within grid cells
- Named area management with color-coded overlays, double-click rename, and delete
- 5 export formats: CSS, SCSS with $variables, Tailwind classes, React component, full HTML file
- Live code output synced to canvas — every change updates the code instantly
- 100% client-side — no server, no upload, no login required
How to Use
Start by clicking a preset from the header — Holy Grail, Sidebar, 3-Column, Dashboard, Blog, or Card Grid — to load a complete layout instantly. The canvas on the right shows the actual CSS Grid with colored named areas. To add a new area, click and drag across empty cells on the canvas — release to create the area (it auto-names as area1, area2, etc.). Double-click an area name in the canvas or in the areas list on the left to rename it. Click an area to select it and highlight it in the list. Use the left panel to edit column sizes — each column shows a text input where you can type any valid CSS value like 1fr, 200px, auto, or minmax(100px,1fr). Click "+ Add" to add a new column or row. Click × to remove one. Drag the Column and Row gap sliders to set gutters. Use the justify-items and align-items buttons to control item alignment within cells. Switch export format using the tabs at the top right: CSS, SCSS, Tailwind, React, or HTML. The code output updates live at the bottom of the canvas. Click Copy to copy it to your clipboard.
Common Use Cases
Frequently Asked Questions
CSS Grid is a two-dimensional layout system for rows and columns simultaneously. Unlike Flexbox (one-axis), Grid lets you position elements across both axes — perfect for page layouts, dashboards, and complex UI patterns.
A CSS property where you write quoted "ASCII art" to name grid regions. Children use grid-area: name to place themselves. It makes layouts readable and easy to rearrange via media queries.
fr (fraction of free space), px, %, auto, min-content, max-content, minmax(min, max), and fit-content(). The fr unit is Grid-exclusive and enables fluid proportional columns.
repeat(3, 1fr) = 1fr 1fr 1fr. repeat(auto-fill, minmax(200px, 1fr)) creates as many 200px+ columns as fit — a fully responsive grid with no media queries.
gap creates space only between tracks (gutters). padding on the container adds outer space on all sides. Use both together — gap for gutters, padding for outer margins.
Select the Tailwind tab. The tool generates HTML with grid-cols-{n}, gap-{n}, col-span-{n}, row-start-{n} classes. Custom track sizes use Tailwind arbitrary value syntax: grid-cols-[200px_1fr_200px].
Full-width header + three columns (left sidebar, main, right sidebar) + full-width footer. Classic web layout. This tool includes it as a preset — click Holy Grail to load it instantly.
Yes. No login, no subscription, no export limits. Everything runs in your browser — nothing is sent to a server.
CSS (with grid-template-areas), SCSS (with $gap variables), Tailwind HTML, React component with inline styles, and a complete standalone HTML file.
Yes — double-click any area on the canvas or in the areas list to rename it. Names are validated to be valid CSS identifiers (alphanumeric, hyphens, underscores).