Color & CSS
CSS Grid Generator
The CSS Grid Generator lets you build a grid layout by setting the number of columns, rows and gap, with a live preview of numbered grid cells.
Once your layout looks right, copy the generated CSS grid-template code straight into your stylesheet.
How to Use the CSS Grid Generator
- Open the CSS Grid Generator.
- Set the number of columns, rows and the gap size.
- Watch the preview grid update live.
- Copy the generated CSS into your project.
Frequently Asked Questions
Does this generate equal-width columns and rows?
Yes, it uses `repeat()` with `1fr` units, so all columns are equal width and all rows are equal height -- a common, flexible starting point.
Can I edit the generated CSS further?
Yes, treat the generated code as a starting point -- you can further customize column widths, spans and more in your own stylesheet.
Is anything uploaded when I use this tool?
No. Everything runs locally in your browser -- nothing is sent to a server.
Advertisement
Sponsored