Generate CSS Grid layouts visually. Configure columns, rows, gap, and column sizes with live preview and copy-ready CSS code for responsive grid designs.
CSS Grid is a two-dimensional layout system that handles both columns and rows simultaneously. It excels at creating complex page layouts, card grids, and dashboard designs. The Grid Generator lets you visually configure grid properties and instantly get production-ready CSS code.
Grid = display: grid + grid-template-columns + grid-template-rows + gapA grid container is created with display: grid. grid-template-columns defines the number and size of columns (e.g., 1fr 1fr 1fr for 3 equal columns), grid-template-rows defines rows, and gap sets spacing between grid cells. The fr unit distributes available space proportionally.
| Input | Output |
|---|---|
| 3 columns, 2 rows, 16px gap, equal columns | .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; } |
| 2 columns (2fr 1fr), 1 row, 24px gap | .container { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto; gap: 24px; } |
| 4 columns (repeat), 3 rows, 8px gap | .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 8px; } |