CSS Grid Layout Generator
Tweak columns, rows, and gaps to generate CSS Grid code instantly
A CSS Grid layout builder for front-end developers and web designers. Set the number of columns and rows, size each track (1fr, fixed px, auto, minmax, and more), and adjust the gap using sliders and dropdowns — the preview updates live, and you can copy the finished CSS and HTML straight into your project. Everything is calculated in your browser, and no data is ever sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Use the sliders to set the number of Columns and Rows, anywhere from 1 to 6 each.
- Adjust the Gap slider to set the spacing between grid items, from 0 to 40px.
- Under column sizing and row sizing, pick the unit you want for each track — 1fr, 2fr, fixed px, auto, minmax, and so on.
- Check the preview, then hit the "Copy Code" button at the bottom to grab the finished CSS/HTML.
FAQ
- Can I use the generated code as-is in a real project?
- Absolutely. It's standard CSS Grid code built around the grid-container and grid-item classes, so you can paste it in and just rename the classes or change the number of items to suit your markup.
- Can I create more than 6 columns or rows?
- The sliders currently top out at 6. If you need more tracks, just extend the grid-template-columns/rows values in the copied CSS by hand.
- What does minmax(100px, 1fr) actually do in grid-template-columns?
- It guarantees the column never shrinks below 100px while still letting it stretch flexibly at a 1fr ratio when there's extra space — which keeps content from getting cramped in responsive layouts.