Build the grid, then take the code.
Set columns, rows, and gap. See the layout live, then copy the exact CSS.
Grid CSS is generated in the browser. Nothing is uploaded.
What it does
About the CSS Grid Generator.
A CSS Grid generator lets you set columns, rows, and gap on a live template, then copy the grid rules into a stylesheet.
It is a playground for grid-template-columns, grid-template-rows, and gap so you can see tracks before you commit them to a dashboard or marketing layout.
How to use
Three steps.
Set
Choose how many columns and rows you need, plus the gap.
Read
Watch the live template update as you change tracks.
Copy
Copy the CSS Grid declarations into your project.
When to use it
Where it helps.
Use it for card galleries, form layouts, and app shells where Flexbox would fight you on two axes. Keep the generated CSS as a starting point, then name grid areas if the layout is complex.
FAQ
FAQ.
What CSS does this generator output?
It outputs Grid properties such as display: grid, grid-template-columns, grid-template-rows, and gap, based on the controls you set.
How do I copy the CSS?
Use the copy control on the generated rules, then paste them onto the container selector. Add child placement (grid-column, grid-row) in your own CSS as needed.
Does the playground send my layout to a server?
No. The preview and the CSS string are built in your browser.
When should I use Grid instead of Flexbox?
Use Grid when you need rows and columns together. Use Flexbox when you are lining up a single row or column of items. This site has a Flexbox playground for that case.
More tools
layout
Spacing/Sizing Scale Calculator
Build a spacing scale from a base unit, linear or geometric.
layout
Aspect Ratio Calculator
Solve for width, height, or CSS aspect-ratio from any two values.
layout
Flexbox Playground
Tune flex-direction, wrap, justify-content, align-items, and gap on a live playground.