About the Flexbox & Grid Playground
This flexbox and grid playground lets you experiment with CSS layout properties and see the result instantly. In flexbox mode, change flex-direction, flex-wrap, justify-content, align-items, align-content and gap; in grid mode, choose a fixed number of equal columns or a responsive auto-fit / auto-fill grid with a minimum column width, plus item alignment and gap. The preview fills with numbered boxes of different heights so alignment differences are easy to see.
It is meant for developers who need a layout fast, designers handing off specs, and anyone learning the difference between justify-content and align-items (or between auto-fit and auto-fill). Copy the container CSS, a matching HTML snippet, or the equivalent Tailwind CSS utility classes.
The generated CSS only includes properties that differ from their initial values, so it stays short: flex-direction: row, flex-wrap: nowrap and align-items: stretch are the browser defaults and are left out.
How to use the flexbox & grid playground
- 1Choose Flexbox for one-dimensional rows or columns, or Grid for two-dimensional layouts.
- 2Set direction, wrap and justify-content (flex) or the column sizing (grid).
- 3Pick align-items and a gap, and change the number of preview items.
- 4Watch the live preview update.
- 5Copy the container CSS, the HTML snippet or the Tailwind classes.
Formula and method
A flex container lays its children out along a main axis set by flex-direction (horizontal for row, vertical for column). justify-content distributes free space along that main axis, align-items positions items on the perpendicular cross axis, and, once flex-wrap lets items wrap onto several lines, align-content distributes those lines. gap adds fixed space between items without margins.
A grid container defines tracks with grid-template-columns. repeat(n, 1fr) makes n equal columns that share the available width. repeat(auto-fit, minmax(min, 1fr)) creates as many columns as fit at the minimum width and then stretches them; auto-fill does the same but keeps empty tracks when there are too few items. justify-items and align-items align each item inside its cell. Properties left at their initial values are omitted from the output.
Worked examples
Wrapping row with space between
flex-direction stays at its default (row), so it is omitted. Items wrap, free space is pushed between them, they are centred vertically, and a 16px gap — Tailwind gap-4, since 4 × 4px = 16px — separates them.
Responsive card grid
Each column is at least 240px wide, and as many as fit are created; leftover width is shared equally. On a 1,000px container that is 3 columns (3 × 240 + 2 × 24 = 768px fits, 4 columns need 1,032px).
Centred vertical stack
With flex-direction: column the main axis is vertical, so justify-content: center centres the stack vertically and align-items: center centres it horizontally. A 10px gap maps to Tailwind gap-2.5.
Frequently asked questions
What is the difference between justify-content and align-items?+
justify-content distributes items along the main axis (horizontal in a row, vertical in a column), while align-items positions them along the cross axis. Changing flex-direction from row to column swaps which one controls horizontal placement.
When should I use flexbox vs CSS grid?+
Use flexbox for one-dimensional layouts where content size drives the layout — nav bars, button groups, centring, toolbars. Use grid for two-dimensional layouts where you want rows and columns to line up — card grids, page layouts, dashboards and forms.
What is the difference between auto-fit and auto-fill?+
Both create as many columns as fit at the minimum width. When there are fewer items than columns, auto-fit collapses the empty tracks so items stretch to fill the row, while auto-fill keeps the empty tracks so items stay at their column width.
How do I center a div with flexbox?+
Put display: flex; justify-content: center; align-items: center; on the parent, and give it a height if you want vertical centring. With grid, display: grid; place-items: center; does the same in two lines.
Why does align-content do nothing?+
align-content only distributes space between flex lines, so it has no effect unless flex-wrap allows wrapping and the items actually wrap onto more than one line, and the container is taller than the lines need.