CSS Flex / Grid Playground
Experiment with flexbox and grid container properties live.
Overview
The CSS Flex / Grid Playground lets you experiment with the container properties of flexbox and grid live — adjust flex-direction, justify-content, align-items, gap, grid-template-columns, grid-template-rows, and place-items — and watch a stack of sample children rearrange instantly. The corresponding CSS is shown so you can copy what you arrived at.
Front-end developers and learners comparing how to centre an element with flexbox vs grid or how grid-template-columns repeat auto-fit works will find it faster than spinning up a CodePen. Most of the time-sink of layout is picking the right property; this collapses that loop to milliseconds.
How it works
Flexbox is one-dimensional — items flow along a main axis with optional wrapping on the cross axis. The container controls direction, alignment along both axes, and gap. Grid is two-dimensional — explicit rows and columns form a track grid that items occupy, with per-track size functions (fr, minmax, auto-fit, auto-fill).
The playground toggles between the two display modes and exposes the canonical container properties for each. Item-level properties (flex, grid-column, grid-row) are not included here — they live on individual children and are best learned alongside actual content.
Examples
- Centre everything →
display: flex; justify-content: center; align-items: center;. - A responsive auto-fit grid →
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;. - A sticky-footer layout →
display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh;. - Equal columns with wrapping →
display: flex; flex-wrap: wrap; gap: 1rem;plusflex: 1 1 240pxon each child.
FAQ
Flexbox or Grid?
Flexbox for one-dimensional layouts (a nav bar, a button row). Grid for two-dimensional layouts (a card grid, a page template). Many real apps use both — grid for the page, flex for the components.
What does 1fr mean?
It's a fractional unit that distributes leftover space after fixed-size tracks are allocated. Three 1fr tracks split remaining width equally.
Does gap work in flexbox?
Yes, in all modern browsers. The old margin-based hacks are no longer needed.
Why does justify-content do nothing on my grid?
Likely because the grid tracks already fill the container. justify-content aligns the track grid within extra container space; if there's no extra space, it has nothing to do.