Flexbox Grid Playground

The Flexbox Grid Playground lets you learn and tune CSS flexbox by eye instead of by trial and error in your editor.

Flexbox is the workhorse of modern layout — it powers navbars, card rows, button groups and centred hero sections — but remembering exactly what justify-content, align-items and align-content each do is genuinely hard.

This playground turns every property into a dropdown or slider and shows the effect on a row of preview items the instant you change it.

Pick a flex-direction to flow items across rows or down columns, switch flex-wrap to let them spill onto new lines, and use justify-content and align-items to position them along the main and cross axes.

When wrapping is on, align-content controls the spacing between the wrapped lines.

A gap slider sets the spacing between items in pixels, and you can add or remove preview boxes to see how the container responds to different amounts of content.

As you experiment, the tool writes a clean, copy-ready .container rule that you can paste straight into your stylesheet.

Every keyword is validated, so the generated CSS is always valid, and the whole thing runs locally in your browser with nothing uploaded.

It is equally useful as a teaching aid for people learning flexbox and as a quick scratchpad for experienced developers nailing down a tricky layout.