CSS Grid Generator — Build Grid Layouts Visually
Configure columns, rows, gaps, and units with sliders, then copy the generated CSS grid code directly into your stylesheet. The live preview updates instantly. No upload, no account — runs entirely in your browser.
How to use this tool
- Adjust columns, rows, and gaps using the visual sliders.
- Preview the grid layout update live on the right.
- Copy the CSS into your stylesheet.
Preview
Generated CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}About CSS Grid Generator
This tool builds a CSS Grid container layout visually and gives you copy-ready code. Sliders set the number of columns and rows, each from one to twelve, and separate sliders control the column gap and row gap from zero to sixty-four pixels in steps of four. Dropdowns choose the track unit: columns can use fr, px, or percent, and rows can use fr, px, or auto. When you pick px or percent for columns, or px for rows, a numeric field appears so you can set the size of each track; the fr and auto options size automatically and hide that field. A live preview renders the actual grid with placeholder cells so you see the result as you adjust.
The generated CSS is a clean .container block. It always sets display to grid and writes grid-template-columns and grid-template-rows using the repeat function, so three one-fr columns become repeat(3, 1fr). Gaps are emitted intelligently: if the column and row gaps are equal, a single gap declaration is used, and if they differ, separate row-gap and column-gap declarations are written. When both gaps are zero, no gap line is added, keeping the output minimal. A copy button places the whole block on your clipboard.
The preview is capped at one hundred forty-four cells for performance, which matches the maximum twelve by twelve grid the sliders allow, and a note appears if a configuration would exceed that. Because the output is plain CSS targeting a class named container, you simply rename the selector to match your markup and paste it in. Everything runs in your browser, so nothing is uploaded.
It is a fast way to prototype card galleries, dashboard layouts, and photo grids without hand-writing repeat expressions, and a good teaching aid for seeing how fr units, fixed sizes, and gaps interact. For more advanced grids using named areas, line names, or auto-fit and minmax, treat the output as a starting scaffold and extend it by hand.
Frequently Asked Questions
- What CSS does this tool generate?
- A .container rule that sets display to grid along with grid-template-columns and grid-template-rows built using the repeat function, plus gap declarations when you have set any spacing. You copy the whole block and paste it into your stylesheet, renaming the selector to match your own markup.
- Which track units are supported?
- Columns can use fr fractions, fixed px, or percent. Rows can use fr, px, or auto. When you choose px or percent for columns, or px for rows, a field lets you set the size of each track; fr and auto size automatically, so the size field is hidden for them.
- How are the column gap and row gap written out?
- If both gaps are equal, the tool emits a single gap declaration. If they differ, it writes separate row-gap and column-gap declarations. If both gaps are zero, no gap line is added at all, which keeps the generated CSS minimal.
- How many columns and rows can I create?
- Each slider ranges from one to twelve, so you can build up to a twelve by twelve grid. The gap sliders range from zero to sixty-four pixels in increments of four.
- Why does the preview say it is capped at 144 cells?
- The visual preview draws one placeholder cell per grid cell, and it stops at one hundred forty-four cells for performance. That equals a full twelve by twelve grid, the largest the sliders permit, so a note simply confirms the cap when you reach it. The generated CSS itself is unaffected.
- Does it support named areas, minmax, or auto-fit?
- No. The tool produces a fixed track count using repeat with a single unit per axis. Advanced features such as grid-template-areas, minmax sizing, and auto-fill or auto-fit are not generated. Use the output as a scaffold and add those by hand if you need them.
- How do I apply the code to my own elements?
- The output targets a class named container. Either give your wrapper element that class, or rename the selector in the copied CSS to match the class or id you already use. The grid then applies to the direct children of that element.
- Is anything uploaded when I use this?
- No. The CSS is generated and previewed entirely in your browser, so nothing you configure is sent to a server.
Embed this tool on your site
Free. One line of HTML — the tool runs in your visitor's browser, no data sent to anyone.
<iframe src="https://brevio.pro/embed/css-grid-generator" width="100%" height="600" loading="lazy" style="border:1px solid #e5e5e5;border-radius:8px" title="CSS Grid Generator — brevio"></iframe> <p style="font:12px/1.4 sans-serif"><a href="https://brevio.pro/tools/css-grid-generator">CSS Grid Generator</a> by <a href="https://brevio.pro">brevio</a></p>