CSS Grid Generator
Build CSS Grid layouts visually — export clean code instantly.
Configure columns and rows with any CSS unit — fr, px, %, auto, min-content, or minmax(). Set gaps, define template areas with named regions, and fine-tune alignment with justify/align controls.
Start from one of 10 pre-built templates — Holy Grail, Dashboard, Blog, Magazine, and more — or build from scratch. Add, remove, and position grid items visually, then export production-ready CSS, HTML, or Tailwind code. Everything runs in your browser.
Grid Tracks
Columns (3)
1
2
3
Rows (2)
1
2
Gap
12px
12px
Template Areas
No template areas defined. Click "Edit Areas" to create named grid areas.
Alignment
Items (0)
Preview
3 col × 2 row.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
}Frequently Asked Questions
Common questions about CSS Grid, layout techniques, and this tool.
Related Tools
More developer tools from ToolFox — layout, colors, and cheat sheets.