Grid Generator
Set columns, rows, and gaps with sliders and a live preview, then copy the generated CSS Grid code.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 12px; row-gap: 12px;
Example input
3 columns, 2 rows
Example output
grid-template-columns: repeat(3, 1fr);