CSS Grid Builder
Set column and row counts, pick each track size, and tune the gap. The grid preview and the CSS update live as you type. Everything runs in your browser.
Grid Size
Gap
Column Tracks
Use 1fr, auto, or a px value like 200px.
Row Tracks
Use 1fr, auto, or a px value like 100px.
About the CSS Grid Builder
The CSS Grid Builder lets you lay out a grid by setting the number of columns and rows, choosing the size of each track, and adjusting the gap. A live preview with numbered cells shows the result as you change values, and the matching grid-template-columns, grid-template-rows, and gap CSS is ready to copy. It is built for developers and designers who want to write grid CSS without guessing. Everything runs in your browser, so nothing is uploaded.
How it works
- Set the number of columns and rows with the two number inputs.
- Give each track a size: 1fr for a flexible share, auto to fit content, or a fixed value like 200px.
- Drag the gap slider to set the spacing between cells.
- Read the generated CSS and click Copy to paste it into your stylesheet.
Features
- Column and row counts set with simple number inputs, up to 12 each.
- Per-track sizing with 1fr, auto, or any px value.
- Gap control with a live pixel readout.
- Live preview with numbered cells that updates as you type.
- Generated grid-template-columns, grid-template-rows, and gap CSS with one-click copy.
Frequently asked questions
What does 1fr mean?
1fr is one fraction of the free space in the grid. If three columns are each 1fr, they split the available width into three equal parts. Mixing values like 1fr 2fr gives the second column twice the share of the first.
When should I use auto instead of a fixed size?
Use auto when you want a track to size itself to its content. Use a fixed value like 200px when you need an exact width or height that does not change with the content.
Can I mix units in one grid?
Yes. Each track is set on its own, so you can combine fr, auto, and px in the same row or column, for example 200px 1fr auto.
Is my data sent anywhere?
No. The preview and the CSS are built locally in your browser with plain JavaScript. Nothing is uploaded or logged.
Does the gap apply to both rows and columns?
Yes. The gap value is written as a single gap property, which sets the same spacing between rows and between columns. To use different spacing, edit the copied CSS into row-gap and column-gap.