🔲 CSS Grid Generator
Visually set rows, columns, and gaps for CSS Grid layouts. Generate production-ready grid-template CSS with live preview — all in your browser.
About the CSS Grid Generator
This tool helps you build CSS Grid layouts visually. Adjust the number of columns and rows, set column and row gaps, and pick units (fr, px, %, auto). The preview updates instantly and the generated CSS code is ready to paste into your stylesheet.
How to use
- Set the number of columns and rows.
- Adjust column and row gaps (in pixels).
- Pick the column and row units and sizes.
- Click Update Preview, then Copy CSS to use in your project.
Frequently asked questions
What does the "fr" unit mean? "fr" stands for fractional unit — it distributes available space proportionally. Three columns of 1fr each take up equal widths.
Can I use different sizes per column? This tool uses a uniform template. For mixed sizes, edit the generated CSS to specify per-track values like grid-template-columns: 200px 1fr 2fr;.
Does it support grid areas? Not in this version. For named grid areas, extend the generated code with grid-template-areas.