Grid Generator
Build CSS grid layouts visually and copy the generated CSS.
Free & unlimited
Layout templates
Named area templates
.grid-container
11,1
21,2
31,3
42,1
52,2
62,3
3 cols × 2 rows = 6 cells1fr 1fr 1fr
Columns
3
1
2
3
Rows
2
1
2
Justify items
Align items
Column gap
12pxRow gap
12pxTip
Use fr units for flexible tracks and px for fixed sidebars. Named areas make complex layouts readable and maintainable.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 12px;
row-gap: 12px;
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Define grid
Set columns, rows, gap, and grid-template areas.
- 2
Place items
Add grid items and position them in the grid.
- 3
Preview
See the grid layout with visible grid lines.
- 4
Copy CSS
Copy the CSS Grid code.
- Use fr units for flexible, proportional column/row sizing.
- repeat(auto-fill, minmax(250px, 1fr)) creates a responsive grid.
- Named grid areas make complex layouts readable.
- CSS Grid and Flexbox complement each other - use both.
- Rows & columns
- Gap control
- Grid areas
- fr units
- Visual preview
- CSS output
- Build complex page layouts.
- Create responsive card grids.
- Design dashboard layouts.
- Learn CSS Grid through interactive experimentation.