CSS Grid Builder
Drag to create areas · Click area to select · Double-click name to rename3 cols × 3 rows
header
sidebar
main
aside
footer
.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;
}

Related Tools

See all ->
UI Snippets LibraryCopy-paste HTML, CSS & JS componentsFlexbox BuilderVisual layout editorCarousel BuilderHTML · CSS · JS · ReactCSS → TailwindConvert CSS to utilitiesTailwind → CSSExpand utilities to CSSREM ↔ PX ConverterBase font size calculatorMedia Queries GeneratorCSS · SCSS · Tailwind · JSResponsive PreviewTest any screen size

CSS Grid Builder — Visual Grid Layout Generator

Updated May 17, 2026
Share & Support

What's included

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); compute fluid values with our CSS Clamp Generator
Independent column-gap and row-gap sliders
justify-items and align-items alignment controls for item placement within grid cells; use our Flexbox Builder for item-level alignment inside 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; convert Tailwind classes with our Tailwind Formatter
Live code output synced to canvas — every change updates the code instantly
100% client-side — no server, no upload, no login required; preview across breakpoints with our Responsive Preview Tool

About this tool

Build a CSS Grid Layout Visually — Named Areas, fr Units, Export CSS or Tailwind

Runs in your browser
No install or signup
Free forever

You know you need grid-template-areas for a dashboard layout, but writing it as quoted ASCII art and remembering the right grid-area name for each child is slow and error-prone. Draw the layout on the live canvas, drag to create named areas, and the tool generates the complete CSS — including both the container rule with grid-template-columns, grid-template-rows, and grid-template-areas, and the individual grid-area rules for every named child. No memorizing coordinate systems, no counting quoted strings.

The canvas renders a real CSS Grid — not a simulation. Drag across cells to create a named area. The area appears as a colored overlay with a label. Double-click to rename it. The areas panel on the left lists all regions in color-coded form with their column×row span shown alongside. Column and row track inputs accept any valid CSS value: fr, px, %, auto, minmax(100px, 1fr). The column gap and row gap sliders control gutters independently from 0 to 48px. The justify-items and align-items controls let you set item alignment across all cells simultaneously.

Six presets cover the most common real-world layout patterns: Holy Grail (full-width header, three-column middle with two fixed sidebars and a fluid main, full-width footer), Sidebar (fixed-width nav plus fluid main), 3-Column (equal fluid columns with header and footer), Dashboard (four-column layout with stat cards and a wide content zone), Blog (article plus fixed-width sidebar), and Card Grid (four-column card layout with a spanning wide card). Click any preset to load a complete layout with named areas and start customizing from there.

Export in 5 formats: CSS with grid-template-areas string and child grid-area rules, SCSS with $col-gap and $row-gap variables, Tailwind HTML with grid-cols-*, col-span-*, and row-start-* utility classes, a complete React component with an inline styles object and JSX, or a standalone HTML file with embedded CSS ready to open directly in a browser. All processing is 100% client-side — no data is uploaded anywhere.

Step by step

How to Use

  1. 1
    Choose a layout presetClick one of the six preset buttons in the header — Holy Grail, Sidebar, 3-Column, Dashboard, Blog, or Card Grid — to instantly load a complete layout. The canvas refreshes with colored named areas showing the grid structure. Presets are the fastest starting point; you can customize everything after loading one.
  2. 2
    Add and configure columns and rowsIn the left panel, the Columns section lists each column track with an editable text input. Type any valid CSS track size: 1fr, 200px, auto, minmax(100px, 1fr), or a percentage. Click "+ Add" to append a new column, or click × next to any column to remove it. The Rows section works identically for horizontal tracks.
  3. 3
    Create named grid areas on the canvasClick and drag across empty cells on the canvas to draw a new area. Release the mouse to commit — the area 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 to a meaningful name like "header", "sidebar", or "content". Click any area to select it. A conflict warning flashes if you try to draw over an existing area.
  4. 4
    Set gap and alignmentDrag the Column Gap and Row Gap sliders in the left panel to set gutter spacing between tracks (0–48px in 4px steps). Use the justify-items and align-items button groups to control how child elements align within their grid cells — options are start, end, center, and stretch (default).
  5. 5
    Select your export formatUse the export tab strip above the code output to switch between CSS, SCSS, Tailwind, React, and HTML. CSS outputs the container with grid-template-areas and a grid-area rule for each named child. SCSS adds $col-gap and $row-gap variables. Tailwind generates HTML with grid-cols-*, col-span-*, and row-start-* utility classes. React generates a full component with an inline styles object. HTML generates a complete standalone file ready to open in a browser.
  6. 6
    Copy or use the generated codeClick the Copy button at the top right of the code output panel to copy the current export to your clipboard. Paste directly into your project. The code updates live with every change — column edits, area renames, and gap adjustments all reflect instantly in the output without needing to refresh.

Real-world uses

Common Use Cases

⊞
Build a header + sidebar + main + footer layout
Click the Holy Grail preset or drag areas yourself. The generated CSS includes grid-template-areas and the correct grid-area rule for each child — the complete structure is ready to paste into any project.
◑
Design a dashboard grid with stat cards and content zones
The Dashboard preset provides a starting point for admin UIs. Drag to add or resize areas, rename them to match your actual content zones, and export CSS or React. Build the carousel widget inside a grid cell with our Carousel Builder.
▦
Create a responsive card grid with no media queries
Use repeat(auto-fill, minmax(280px, 1fr)) in the column track to create a grid that adapts to any container width automatically — columns wrap when they don't fit, no breakpoints needed.
⇄
Understand what grid-template-areas actually does
The canvas shows the real CSS Grid — not a simulation. Drag areas around and watch the generated grid-template-areas string update live. The visual connection between the ASCII art and the rendered layout makes the property immediately intuitive.
≡
Get Tailwind grid classes without memorizing grid-cols syntax
The Tailwind tab generates grid-cols-{n}, gap-{n}, col-span-{n}, and row-start-{n} classes for the layout. Paste the HTML directly into a Tailwind project.
⚡
Export a complete React grid component
The React tab generates a component with an inline styles object for the container and each named area. Paste it into any React app and replace the placeholder content with your actual components.

Got questions?

Frequently Asked Questions

Click the Holy Grail preset to load the classic layout: full-width header, three middle columns (sidebar, main, aside), and full-width footer. Or drag areas yourself on the canvas. The generated CSS includes grid-template-areas with the correct ASCII art string and a grid-area rule for each child element.

grid-template-areas lets you name grid regions in CSS by writing quoted rows as "ASCII art": "header header" / "sidebar main" / "footer footer". Each child then uses grid-area: header (or sidebar, main, footer) to position itself. This makes layouts readable and easy to reorganize — just rewrite the template areas string for a different arrangement.

Set a column track to repeat(auto-fill, minmax(280px, 1fr)). This creates as many columns as fit the container at the minimum width, with each column expanding to fill space. On wide screens you might get 4 columns; on mobile, 1 — with no media queries required.

fr (fraction of free space — Grid-exclusive), px (fixed), % (percentage of container), auto (size to content), minmax(min, max) (flexible range). The fr unit is the key to fluid proportional layouts — 3 columns of 1fr each take exactly one-third of available space after fixed tracks are satisfied.

Select the Tailwind tab. The tool generates HTML with grid-cols-{n}, gap-{n}, col-span-{n}, and row-start-{n} utility classes. Custom track sizes use arbitrary value syntax: grid-cols-[200px_1fr_200px]. Copy and paste into any Tailwind project.

Grid is for two-dimensional layouts where you control rows and columns simultaneously — page shells, dashboards, magazine layouts. Flexbox is for one-dimensional distribution — navbars, button groups, centering content. Most UIs use both: Grid for the overall page structure and Flexbox inside individual components.

CSS (grid-template-areas + child grid-area rules), SCSS (with $gap variables), Tailwind HTML (utility classes), React component (inline styles object), and a complete standalone HTML file ready to open in a browser.

Yes — no login, no subscription, no export limits. Everything runs in your browser. Nothing is sent to any server.