CSS layout properties are hard to predict from their names alone. Which of justify-content and align-items controls the horizontal axis, and how that flips when you set flex-direction: column, is something you learn far faster by changing values and watching.
This playground exposes the main Flexbox and CSS Grid properties as dropdowns and sliders with a live preview, then hands you the finished layout as CSS, HTML or Tailwind classes. Click any item to adjust its own flex-grow, align-self and order, or its grid row and column spans.
How to use
- Pick a layout mode — Flexbox lays items out along one axis; Grid works in two dimensions with explicit rows and columns. Switching modes swaps in the relevant property set.
- Adjust container properties — Set alignment, direction, wrapping and gap in the left panel and watch the preview respond. Use the +/− buttons at the top to change the number of items.
- Fine-tune individual items — Click an item in the preview to open its own property panel. In Flexbox,
flex-grow: 1makes it absorb the remaining space; in Grid, raising the span merges cells. - Copy the code — The three panels at the bottom give you CSS, HTML and Tailwind classes. The CSS output includes per-item rules only where they differ from the defaults, so nothing superfluous comes along.
Frequently asked questions
Should I use Flexbox or Grid?
If you are arranging content along a single line or column and sizing follows the content, Flexbox is the natural fit. If you are defining rows and columns up front and placing items into that structure, use Grid.
In practice you use both: Grid for the page skeleton (header, sidebar, main), Flexbox for aligning the logo and nav inside the header. For a responsive card list, grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) often replaces a whole stack of media queries.
Changing `justify-content` does nothing.
There is probably no free space along the main axis.
justify-content distributes leftover space after the items are laid out. If the items already fill the container, or one of them has flex-grow: 1 and is absorbing everything, nothing moves. Reduce the item count or reset flex-grow to 0 and try again.
The generated Tailwind classes have no effect.
Arbitrary-value classes like gap-[12px] only exist if Tailwind's scanner finds that exact string in your source.
Building class names dynamically — ` gap-[${n}px] — hides them from the scanner and no CSS is generated. Write the complete class string literally in your markup, or use an inline style` or a CSS custom property when the value must vary at runtime.
Concepts worth knowing
Main axis and cross axis
Every Flexbox alignment property is defined relative to the main axis and the cross axis. With flex-direction: row, the main axis is horizontal and the cross axis vertical. Switch to column and they swap.
justify-content always acts on the main axis and align-items always on the cross axis. That is why, in a column layout, justify-content: center centres vertically and align-items: center centres horizontally. Toggling direction here while watching both properties makes the relationship click.
Reading the flex shorthand
flex: 1 expands to flex: 1 1 0% — grow 1, shrink 1, basis 0. Because the basis is zero, every item splits the available space equally regardless of its content.
flex: auto is 1 1 auto, which honours content size first and then distributes what is left. Use flex: 1 for equal columns and flex: auto for content-proportional ones. One more classic gotcha: a flex item's min-width defaults to auto, so long unbreakable text can push the container wider than intended. min-width: 0 fixes it.
gap replaced the margin dance
The old approach was margin-right on every item plus a :last-child rule to remove the trailing one. gap is declared once on the container and applies only between items, so the exception disappears.
It has been in Grid for years and is now supported in Flexbox by every current browser. row-gap and column-gap let you differ per axis. It matters most in wrapping layouts, where margins never handled the space between rows cleanly.