CSS Grid Playground

Build CSS grid layouts visually: set grid-template-columns and rows, gaps, alignment and auto-flow, place items with grid-column and grid-row using the numbered grid lines, start from examples like a dashboard or holy-grail page, and copy the CSS.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Grid Playground

1Type the column and row templates, e.g. repeat(3, 1fr) or 200px 1fr.
2Set gaps, alignment and auto-flow.
3Click an item and set its grid-column and grid-row start and end — use the small line numbers, or values like span 2.
4Load an example layout, then copy the generated CSS.

What is the CSS Grid Playground?

CSS grid places items on rows and columns at once. grid-template-columns: repeat(3, 1fr) makes three equal columns; fr means a fraction of the free space, and minmax(120px, 1fr) with auto-fill makes as many columns as fit — a responsive gallery without media queries.

Grid lines are numbered from 1 at the start edge. grid-column: 1 / 3 spans from line 1 to line 3 (two columns); span 2 does the same from wherever the item lands. The line numbers in the preview are read back from your browser, so they match exactly what the CSS produces.

Frequently asked questions

What does 1fr mean?

One fraction of the remaining space. In 1fr 2fr, the second column gets twice the leftover width of the first.

What is the difference between auto-fill and auto-fit?

Both create as many tracks as fit. auto-fill keeps empty tracks; auto-fit collapses them so the items stretch to fill the row.

Is the CSS Grid Playground free and private?

Yes. The CSS Grid Playground is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →