The CSS Grid Generator lets you build a CSS grid layout visually instead of writing it by hand. Set the number of columns and rows and the gap between cells, then click a cell to add an item. Drag items to reposition them and drag the bottom-right corner to resize — everything snaps to the grid lines.
As you work, the tool writes the matching CSS and HTML for you: a grid container with grid-template-columns, grid-template-rows, and gap, plus grid-column and grid-row rules for each item. Copy the code straight into your project. Everything runs in your browser.
How to use the CSS grid generator
- Set the columns, rows, and gap using the steppers.
- Click a “+” cell to add a grid item.
- Drag an item to move it, or drag its bottom-right corner to make it span more columns or rows.
- Copy the generated CSS and HTML, or hit Reset to start over.
What the generated code does
- grid-template-columns: repeat(n, 1fr) — creates n equal-width columns.
- grid-template-rows: repeat(n, 1fr) — creates n equal-height rows.
- gap — the space between rows and columns.
- grid-column / grid-row — where each item starts and how many tracks it spans.
Frequently Asked Questions
What is a CSS grid generator?
It is a visual tool that builds CSS Grid layouts for you. You arrange columns, rows, and items on screen and it outputs the grid-template-columns, grid-template-rows, gap, and item placement CSS — no need to write it by hand.
What does “1fr” mean in the generated CSS?
The fr unit is a fraction of the free space in the grid. repeat(3, 1fr) makes three columns that each take an equal share of the available width. You can change the values in your own CSS after copying.
Can I make an item span multiple columns or rows?
Yes. Drag the bottom-right corner of an item to resize it across several columns or rows. The generated grid-column and grid-row values update automatically.
Do you also generate Tailwind classes?
Yes — use our Tailwind Grid Generator for the same visual builder with ready-to-use Tailwind grid classes instead of plain CSS.
Is the CSS grid generator free?
Yes, it is completely free, needs no sign-up, and runs entirely in your browser.