CSS Grid Generator
Draw a grid layout by dragging and copy the CSS and HTML.
Draw The Layout, Copy The CSS
Set the number of rows and columns, their sizes and the gaps, then drag across the grid to place each item — a header across the top, a sidebar down one side, the main area beside it. Name the items and copy CSS and HTML that reproduce the layout exactly.
Track sizes take any valid CSS: 1fr, 240px, auto, minmax(200px, 1fr) or repeat(…). When the items do not overlap, the CSS uses named grid-template-areas, which reads like a picture of the layout; otherwise it uses line numbers.
Key features
- Drag to place items across any cells.
- Any track size — fr, px, %, auto, minmax and repeat.
- Named template areas or line numbers.
- Separate row and column gaps.
- CSS and HTML ready to copy.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Grid Generator
- Set rows and columns
Up to 12 of each. - Size the tracks
Type a CSS value for each row and column. - Drag to place items
Then give each a name. - Copy the code
Paste the CSS and HTML into your project.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What does 1fr mean in CSS Grid?
One fraction of the free space. Three columns of 1fr share the width equally; 2fr 1fr gives the first column twice the width of the second. Space for fixed tracks and gaps is taken out first.
Should I use Grid or Flexbox?
Grid is for two-dimensional layouts — rows and columns together, like a page. Flexbox is for one direction at a time, like a toolbar or a row of cards. They combine well: a Grid page with Flexbox inside its parts.
What are grid-template-areas?
A way to name regions of the grid with strings that look like the layout, such as "header header" "sidebar main". Each item then says grid-area: main. It makes layouts easy to read and to rearrange in media queries.
How do I make the grid responsive?
Use repeat(auto-fit, minmax(240px, 1fr)) for columns that wrap automatically, or redefine grid-template-areas inside a media query to stack the items on small screens.
Why did it switch from areas to line numbers?
Template areas must be rectangles and cannot overlap. When two items share a cell, the generator falls back to grid-area with line numbers, which supports overlaps.