CSS Grid Generator
Build responsive grid layouts with adjustable columns, rows, and gaps.
Grid settings
Define columns, rows, and gaps
Adjust the grid structure, then tune each item’s placement and span.
12 columns · 6 rows · 16x16px gap
Quick layouts
Canvas
Screen size
Set the viewport dimensions for your grid layout.
Items
Place each grid cell
Drag items on the canvas and resize with the handle.
1
2
3
Preview
1512 × 982
25% Scale View (4 canvas px = 1 screen px) — Note: Scale is set to 10% by default to ensure the entire grid is visible.
Export
Generated code
Developer Usage: Copy this code to implement the grid layout in your project.
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(6, minmax(0, 1fr));
column-gap: 16px;
row-gap: 16px;
}
.1 { grid-column: 1 / span 8; grid-row: 1 / span 4; }
.2 { grid-column: 9 / span 4; grid-row: 1 / span 6; }
.3 { grid-column: 1 / span 8; grid-row: 5 / span 2; }