CSS Grid Generator
Set columns, rows and gaps with sliders, see a live grid, and copy the CSS Grid code.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
}
Sketch a CSS Grid visually. Set how many columns and rows you want and how much space to leave between them, and a live grid of numbered cells redraws to match while the code box fills with the matching CSS. It's a quick way to prototype a two-dimensional layout and to see how column and row counts translate into a real grid. Everything runs in your browser.
What the sliders control
Four sliders drive the layout: columns and rows each run from 1 to 12, and separate column-gap and row-gap sliders (0–60px) let you space the tracks independently. The generated CSS uses repeat(n, 1fr) for both axes, so every track shares the available space equally — the standard starting point for a responsive grid. The live preview builds numbered cells so you can count the tracks at a glance.
A note on the preview
To keep things responsive, the preview draws at most 64 cells even if your column × row count would be higher — the copied CSS still reflects your exact numbers, it's only the on-screen sample that's capped. The output targets a .grid-container class with display: grid, your two repeat() track definitions and the two gap values, ready to paste and rename for your project.
Frequently Asked Questions
What does repeat(n, 1fr) mean in the output?
It creates n equal tracks that each take one fraction (1fr) of the leftover space, so the columns or rows divide the container evenly. It is the concise way to write "n equal-width columns".
Why can I only set up to 12 columns and rows?
The sliders cap at 12 each, which covers the vast majority of layouts (12-column grids are a common design standard). For more tracks, edit the repeat() count in the copied code.
Can I set different column and row spacing?
Yes. Column-gap and row-gap are separate sliders (0–60px each), so you can, for example, keep columns tight while giving rows more breathing room.
Why does the preview stop adding cells on large grids?
The preview renders a maximum of 64 cells to stay fast, but this only limits the visual sample — the CSS it generates always matches the exact column and row counts you chose.