UTILS.
100% in-browser
▦

CSS Grid Generator

Generate a CSS grid layout with adjustable columns, rows and gap, with a live preview.

About this tool

CSS Grid Generator is a free, in-browser tool that turns three simple controls — column count, row count, and gap — into a ready-to-paste CSS grid layout. Set the values, watch a live preview redraw, and copy the generated rule.

Columns and rows are whole numbers from 1 to 12 (defaulting to 3 and 2), and the gap is a slider from 0 to 40 pixels (default 10). Both dimensions are written with repeat() and the 1fr unit, so every track shares the available space equally. The preview fills each cell with a numbered, colored block so you can see the track structure at a glance, and the output is a plain .grid rule using display: grid, grid-template-columns, grid-template-rows, and gap. One click copies it to your clipboard.

Everything runs entirely in your browser — no uploads, no accounts, no tracking — and it keeps working offline once the page has loaded.

Frequently asked questions

How are the tracks sized?
Both columns and rows are written with repeat() and the 1fr unit, so all tracks share the available space evenly.
What does the gap control do?
It sets the grid gap in pixels between every cell, from 0 to 40, and applies live to both the preview and the generated CSS.
What ranges do the controls allow?
Columns and rows accept whole numbers from 1 to 12; the gap slider runs from 0 to 40 pixels. Out-of-range or non-numeric entries are clamped, falling back to the defaults of 3 columns, 2 rows, and a 10px gap.
What CSS does it output?
A .grid rule with display: grid, grid-template-columns and grid-template-rows each set with repeat() and 1fr, and the gap in pixels. The Copy button places that exact rule on your clipboard.

More tools

CSS Box Shadow GeneratorCSS Border Radius GeneratorCSS Gradient GeneratorCSS Text Shadow GeneratorCSS Triangle GeneratorCSS Flexbox Playground