CSS Grid Layout Generator
Design a CSS Grid visually and copy the code instantly
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
A visual CSS Grid builder for web developers and designers. Adjust the number of columns and rows, pick a track size for each one (1fr, fixed pixels, auto, minmax, and more), and set the gap — the preview updates live and the finished CSS and HTML are ready to copy into your project. Everything runs locally in your browser, so nothing is sent to a server.
How to use
- Set the number of Columns and Rows with the sliders, from 1 to 6 each.
- Use the Gap slider to control the spacing between grid items, from 0 to 40px.
- Under Column Sizes and Row Sizes, choose a size unit for each track, such as 1fr, 2fr, fixed pixels, auto, or minmax.
- Check the live preview, then click 'Copy Code' to grab the finished CSS and HTML.
FAQ
- Can I use the generated code directly in my project?
- Yes. It's standard CSS Grid based on grid-container and grid-item classes — just paste it in and rename classes or adjust item count as needed.
- Can I create more than 6 columns or rows?
- The sliders currently cap at 6. For more tracks, copy the CSS and manually extend the grid-template-columns/rows values.
- What does minmax(100px, 1fr) do?
- It guarantees the track is at least 100px wide while letting it grow flexibly to fill available space, which keeps content from becoming too cramped in responsive layouts.