CSS Grid Generator
Design a grid visually — change rows, columns and gap, click items to span them, and copy the CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;
}Frequently Asked Questions
How do item spans work here?
Click an item to cycle its column span from 1 up to the number of columns; right-click to cycle its row span. Spanned items get .item-N classes with grid-column / grid-row span rules in the generated CSS.
What does repeat(3, 1fr) mean?
It creates 3 equal columns, each one fraction (1fr) of the available width after gaps. It is shorthand for 1fr 1fr 1fr and is the most common way to build responsive column layouts.
When should I use Grid instead of Flexbox?
Grid is for two-dimensional layouts — rows and columns controlled together, like dashboards and galleries. Flexbox is one-dimensional (a row OR a column). Many real layouts use both: Grid for the page skeleton, Flexbox inside components.
Can the generated grid be responsive?
The output is a fixed column count, a clear starting point. For auto-responsive behaviour, replace the columns line with grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); — the preview here focuses on teaching spans and structure.
Related Tools
CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
Border Radius Generator
Set each corner radius with sliders — including fancy blob shapes — and copy the CSS.
Box Shadow Generator
Tweak shadow offset, blur, spread, colour and opacity with a live preview box.