Free Online CSS Grid Generator
Design CSS grid layouts with live preview
How to Use CSS Grid Generator
- 1
Define grid structure
Enter grid-template-columns and rows values, or click a preset layout.
- 2
Adjust gap
Use the slider to set the gap between grid cells.
- 3
Configure items
Set column-span and row-span for each grid item to create complex layouts.
- 4
Copy CSS
Click Copy to get the complete CSS Grid code.
Frequently Asked Questions
Is my data safe?
What are fr units?
Can I mix units?
When should I use Grid vs Flexbox?
Learn more
About CSS Grid Generator
Design CSS Grid layouts visually with this interactive generator. Define grid columns and rows using fr units, pixels, or any CSS value. Configure gap spacing, add grid items with custom column and row spans, and preview the layout in real time. Includes preset layouts like sidebar+main and holy grail. Copy clean CSS code with one click.
Why Use CSS Grid Generator?
- Visual grid editor lets you see the layout as you build it — no more guessing with grid-template values.
- Preset layouts (2-col, 3-col, sidebar+main, holy grail) give you instant starting points.
- Configure per-item column and row spans for complex grid placements.
- Generates clean CSS that you can copy and use immediately.
Common Use Cases
Page layouts
Build full-page layouts with headers, sidebars, main content, and footers.
Dashboard grids
Create dashboard layouts with widgets of varying sizes spanning multiple rows or columns.
Gallery layouts
Design image gallery grids with featured items spanning multiple cells.
Learning CSS Grid
Experiment with grid-template-columns, grid-template-rows, and span values to learn CSS Grid.