CSS Grid Playground

Visual grid editor with live CSS output. Adjust columns, rows, gap and try preset layouts.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;

What the CSS Grid playground does

Adjust columns, rows, and gap with sliders, try preset layouts, and copy the generated CSS. You build the grid visually and read out the exact grid-template properties that produce it — a fast way to learn Grid by doing rather than memorizing.

How CSS Grid works

Grid is CSS's two-dimensional layout system. You define tracks with grid-template-columns and grid-template-rows, size them with the flexible fr unit (a fraction of leftover space), minmax(), or auto, and space them with gap. Items place themselves into cells automatically, or you can position them explicitly by line number or with named grid-template-areas.

Why it matters

Grid replaces the float and hack-heavy layouts of the past with a system built for two-dimensional design — rows and columns at once. Pair it with Flexbox (which excels at one-dimensional rows or columns) and most layout problems become straightforward.

Frequently asked questions

Grid vs Flexbox — which should I use?

Flexbox for one dimension (a row of buttons, a nav bar); Grid for two dimensions (a page layout, a card gallery). They compose well — a Grid cell can contain a Flexbox.

What is the fr unit?

A fraction of the available space. grid-template-columns: 1fr 2fr makes the second column twice as wide as the first, after fixed sizes and gaps are subtracted.

What are grid-template-areas?

A way to name regions ("header header" "sidebar main") and place items by name — readable, self-documenting layouts.