Flexbox & Grid Playground

For Flexbox: display, flex-direction, flex-wrap, justify-content, align-items, align-content (only when wrapping, since it needs multiple lines) and gap on the container, and one flex: grow shrink basis shorthand on every child. For Grid: display, grid-template-columns / rows, gap, justify-items and align-items, plus grid-column / grid-row spans on one chosen child. Values are CSS keywords and lengths from the Flexible Box Layout Level 1 and Grid Layout Level 2 specifications; flex-basis and track lists are validated as text.

The boxes are plain divs with exactly the generated declarations applied as inline styles, so the layout you see is the browser’s own — including how auto-fit chooses a column count at your window width and how flex-shrink squeezes boxes on a narrow screen. The boxes have small minimum sizes so that stretch, baseline and space-* are visible. Resize the window to see the responsive behaviour.

Per-item order, align-self and individual flex values; named grid areas and line names; margins on items (auto margins are a common centering trick); and real content — text wraps and images have intrinsic sizes, and min-width: auto on flex items often surprises. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.