CSS Grid Generator
Visual CSS Grid generator, create complex 2D layouts easily.
Presets
Container Settings
Item Settings
Click an item in preview to edit its properties
Preview
1
2
3
4
5
6
CSS Code
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}About This Tool
This CSS Grid generator simplifies complex 2D layout design. Its intuitive interface lets you define row and column tracks (supporting fr, px, auto), set gaps, and control container alignment. Crucially, it allows fine-tuning of individual grid items, including their row/column spans and self-alignment. Features presets like Basic Grid, Sidebar, and Gallery to help you get started quickly and generate standard CSS Grid code.
Features
- ▦ Track Control: Flexibly add/remove row and column tracks with support for fr, px, % units
- 📐 Gap Control: Independently adjust Row Gap and Column Gap
- 🎯 Alignment: Full control over container content and item alignment (horizontal/vertical)
- 🖱️ Item Tuning: Click to select items and customize their row/column spans and self-alignment
- ⚡ Layout Presets: One-click application of classic layouts like Sidebar, Header/Footer, and Gallery