CSS grid generator
Set the columns, rows and gaps — choose fr, px or auto per track, or type an explicit list like "1fr 2fr 1fr". The numbered preview updates live, then copy the grid CSS. Everything runs in your browser.
Preview
Columns3
Rows3
Column gap12px
Row gap12px
Default column unit
Default row unit
grid-template-columns
grid-template-rows
Type each track separated by spaces, e.g. 1fr 2fr 200px auto.
Generated CSS
Everything runs in your browser. Nothing is uploaded.
How it works
STEP 1
Set columns and rows
Drag the sliders for the number of columns and rows, and the column and row gaps. The preview fills with numbered cells as you go.
STEP 2
Pick the track sizing
Choose fr, px or auto for equal tracks, or switch on explicit track lists to type something like "1fr 2fr 1fr" for full control.
STEP 3
Copy the CSS
Copy the ready-to-use grid rule — display, grid-template-columns / rows and gap — with one click and paste it into your stylesheet.