CSS Grid Generator
Design a CSS grid visually with columns, rows, gaps and spans, then copy the generated CSS.
Live preview
Tap any numbered cell to make it span several columns or rows.
No cell selected
How it works
Set the number of columns and rows, tweak each track size and the gaps, and the CSS grid
generator writes the grid-template-columns, grid-template-rows and
gap declarations for you while the preview updates on every keystroke. Track
values accept anything CSS Grid does — 1fr for a share of the free space,
fixed px or % values, auto, or
minmax(120px, 1fr) for responsive columns. Click any cell in the preview to
make it span several columns or rows and the generator adds the matching
grid-column: span 2 rules. Copy the CSS, copy the HTML skeleton, or download a
self-contained demo page. Everything is generated by JavaScript in your browser — nothing is
uploaded, and there are no ads or sign-ups.
Frequently asked questions
How do I create a CSS grid layout?
Set display: grid on a container, then describe the tracks with grid-template-columns and grid-template-rows and space them with gap. In this generator you pick the number of columns and rows, type a size for each track, and the CSS is written for you. Copy it into your stylesheet and use the matching HTML skeleton for the markup.
What is the difference between fr and px in CSS Grid?
A px track is a fixed width that never changes, while 1fr means one share of the leftover space, so fr tracks grow and shrink with the container. Mixing them is common: a fixed 200px sidebar next to a 1fr content column. For responsive columns that never collapse too far, use minmax(120px, 1fr). The generator accepts all of these as track values.
How do I make a grid item span multiple columns or rows?
Add grid-column: span 2 (or grid-row: span 2) to the item. Click any cell in the live preview, set the column and row span, and the generator adds the matching .item-N rule to the CSS so you can see the layout reflow before you copy it.