CSS Grid Generator — Visual Grid Layout Builder
Design CSS grid layouts visually: paint named grid areas, drag items across tracks, tune grid-template-columns / rows, gaps and responsive breakpoints — then copy or download clean CSS + HTML. 100% free, runs entirely in your browser.
Structure
🎨 Areas mode: type an area name, then click-drag across cells to paint it. Painted cells generate grid-template-areas. Areas must be rectangles.
3
px
2
Alignment
Responsive
px
Breakpoints emit real @media blocks that collapse the grid to one column. Preview them with the viewport switcher.
Live preview
💡 Items mode: click an empty cell to drop an item · click an item to select it · drag across cells to span it. Select an item to edit or delete it below.
Generated code
How to use the CSS grid generator
- Pick a preset (Holy Grail, Photo Gallery, 12-Column, Dashboard…) or start from the blank 3×2 grid.
- Shape your tracks — add or remove columns and rows, then size each track with fr, px, %, auto or minmax().
- Place content — click cells to drop items and drag across cells to span them, or switch to Areas mode and paint named regions for grid-template-areas.
- Go responsive — choose auto-fit / auto-fill tracks for breakpoint-free grids, or add a stack breakpoint to emit a real @media block.
- Copy or download the generated CSS and matching HTML scaffold, then paste them into your project.
Worked examples (computed by the tool's own engine)
1fr math: in a 900px-wide container with three 1fr columns and a 24px gap, the free space is 900 − (2 × 24) = 852px, so each column renders at exactly 284px.
Auto-fit math: with repeat(auto-fit, minmax(250px, 1fr)) in a 1200px container and 24px gap, the browser fits ⌊(1200 + 24) / (250 + 24)⌋ = 4 columns, each (1200 − 3 × 24) / 4 = 282px wide.
How this grid generator compares
| Feature | This tool | cssgridgenerator.io | Griddy | Layoutit |
|---|---|---|---|---|
| Visual drag-to-span items | ✅ | ❌ | ✅ | ✅ |
| Paint named grid areas | ✅ | ❌ | ❌ | partial |
| Responsive auto-fit / auto-fill | ✅ | ❌ | ❌ | ❌ |
| Custom @media breakpoints | ✅ | ❌ | ❌ | ❌ |
| HTML scaffold export | ✅ | ✅ | ❌ | ✅ |
| Download as files | ✅ | ❌ | ❌ | ❌ |
| Viewport preview (desktop/tablet/mobile) | ✅ | ❌ | ❌ | ❌ |
| 100% client-side, no signup | ✅ | ✅ | ✅ | ✅ |
Frequently asked questions
What is a CSS grid generator?
A CSS grid generator is a visual tool that builds CSS Grid layouts for you. Instead of hand-writing grid-template-columns, grid-template-rows, gap and grid-template-areas, you click, drag and paint the layout in a live preview, and the tool outputs clean, copy-ready CSS plus matching HTML.
What does 1fr mean in CSS grid?
The fr unit is one fraction of the free space left after fixed tracks and gaps are subtracted. Example: in a 900px-wide container with three 1fr columns and a 24px gap, free space is 900 − 48 = 852px, so each column is exactly 284px wide. Mixing fixed and fr tracks works the same way: fixed tracks are subtracted first, then fr tracks share what remains.
How do grid-template-areas work?
grid-template-areas lets you name rectangular regions of the grid, like "header header header" "nav main aside" "footer footer footer", then place items with grid-area: header. Every named area must form a complete rectangle — no L-shapes. Switch this tool to Areas mode, type a name, and paint cells to build the area map visually.
How do I make a responsive grid without media queries?
Use repeat(auto-fit, minmax(250px, 1fr)). The browser fits as many 250px-minimum columns as possible and stretches them to fill the row. Example: in a 1200px container with a 24px gap, floor((1200 + 24) / (250 + 24)) = 4 columns, each (1200 − 72) / 4 = 282px wide. Add more width and a fifth column appears automatically.
What is the difference between auto-fit and auto-fill?
Both repeat a track pattern to fill the container, but auto-fit collapses empty tracks to zero so existing items stretch wider, while auto-fill keeps the empty tracks reserved, leaving blank space at the end of the row. Use auto-fit for galleries and card grids that should always fill the row; use auto-fill when you want a fixed column rhythm even with few items.
CSS grid vs flexbox — when should I use which?
Use CSS grid for two-dimensional layouts where you control rows and columns together: page skeletons, dashboards, galleries and card grids. Use flexbox for one-dimensional flows: navbars, button groups, form rows and centering. They compose well — try our flexbox builder (/tools/flexbox-builder/) for the one-dimensional parts and nest it inside grid cells.
How do I stack grid columns on mobile?
Add a breakpoint in the Responsive panel, for example max-width 768px with the "stack to one column" option. The tool generates a real @media (max-width: 768px) block that sets grid-template-columns: 1fr on small screens, so your multi-column desktop layout collapses into a single readable column.
How do I place an item across multiple columns or rows?
Set grid-column: 1 / 3 to span from line 1 to line 3, or grid-column: span 2 to span two tracks from the auto-placement position. In this tool, click an item and drag across cells in the preview — the span values are written into the CSS for you, including negative line numbers like 1 / -1 for full-bleed rows.
Do all browsers support CSS grid?
CSS grid is supported by about 97% of browsers in global use, including all current Chrome, Edge, Firefox and Safari versions. The subgrid feature shipped in every major browser in 2023. The CSS this generator outputs uses only widely supported properties, so it works without prefixes or polyfills.
Is this CSS grid generator free? Is my layout private?
Yes — it is completely free with no signup, and 100% of the work happens in your browser. Your layout is never uploaded to any server. You can copy the CSS and HTML or download them as files and paste them straight into your project.
Building one-dimensional layouts too? Try our Flexbox Builder — grid and flexbox compose perfectly, with flexbox nested inside grid cells.
Free tool by NRTechStudio