CSS Grid & Flexbox Playground

A live workbench for two of CSS's most useful layout systems. Adjust the controls, watch the layout move, and copy the generated CSS into your own project. No frameworks, no fluff.

Preview grid · 6 children

Controls

Children 6

grid-template-columns

e.g. 1fr 1fr 1fr or repeat(3, minmax(0, 1fr))

grid-template-rows

e.g. 100px 100px or auto

gap 8px

justify-items

align-items

justify-content

align-content

flex-direction

flex-wrap

justify-content

align-items

gap 8px

flex (per child)

Click a child box to select it. Selected children get the value above; others stay at default.

Generated CSS

How to use

Pick a layout mode at the top — Grid for 2D row/column layouts, Flexbox for 1D distributions.
Drag the Children slider to add or remove numbered boxes from the preview. In Flexbox mode, click a box to select it for per-child styling.
Adjust properties in the right panel. The preview updates instantly and the generated CSS at the bottom reflects every change.
Hit Load sample to try a preset layout — a 3-column card grid for Grid mode, or a navbar pattern for Flexbox mode.
Use Copy to grab the CSS and paste it into your own stylesheet. Reset clears everything back to defaults.