Build a CSS grid layout visually
Build a CSS Grid layout visually: set columns, rows, and gap, with live preview and copyable grid-template CSS.
Both use an even repeat(n, 1fr) track list, the most common starting point for a grid layout.
One gap value controls the spacing between every row and column at once.
grid-template-columns, grid-template-rows, and gap, ready to paste onto a display: grid container.
Frequently asked
What does repeat(n, 1fr) mean?
It creates n equal-width tracks that share the available space evenly. It's shorthand for writing 1fr that many times, and is the most common way to start a grid before customizing individual track sizes.
Can I make columns different widths?
This tool generates an even grid to get you started quickly. To customize individual track sizes, replace the repeat(n, 1fr) value with your own list, like 200px 1fr 2fr, once you've copied the base CSS.
Do I need to set both grid-template-columns and grid-template-rows?
No. If you omit grid-template-rows, rows are sized automatically to fit their content. It's included here so you can preview a fixed-row layout too.