Create CSS grid layouts visually with an interactive editor. Define rows, columns, gaps, and alignment to generate clean CSS code.
Presets
Column sizing
1fr
1fr
1fr
Live preview
Feature
c:span 2
Item 2
Item 3
Item 4
Item 5
Item 6
Items with an explicit line or span are outlined. Resize the window to watch auto-responsive columns reflow.
Generated code
class
→ .grid
⌘/Ctrl+K to copy
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}
.grid > *:nth-child(1) {
grid-column: span 2;
}