.container {
display: flex;
gap: 8px;
}About Flexbox & CSS Grid Playground — Generate CSS
CSS Flexbox and Grid are the two modern systems for arranging elements on a page, but remembering which property does what — and how `justify-content` differs from `align-items`, or when to reach for `repeat()` — is easier to learn by seeing it. This flexbox playground and CSS grid generator lets you tweak the container properties and watch a row of numbered sample boxes rearrange instantly.
Switch between Flex and Grid modes, adjust direction, justification, alignment, wrapping, gap, and column or row counts, then copy the generated CSS straight into your stylesheet. It's built for devs fine-tuning a layout or learning how each property behaves, without spinning up a scratch file or a CodePen.
Everything runs entirely in your browser. No layout you build and nothing you copy ever leaves your device.
Features
- Flexbox and CSS Grid in one playground with a mode toggle
- Live preview of numbered sample boxes that update as you change properties
- Flex controls: direction, justify-content, align-items, wrap, and gap
- Grid controls: column and row counts, gap, justify-items, and align-items
- Copy clean, ready-to-paste container CSS; fully offline
How to use
- Pick Flex or Grid with the mode toggle at the top.
- Adjust the layout properties and the item count; the preview boxes rearrange live.
- Read the generated CSS in the output pane to see exactly which declarations changed.
- Copy the CSS and drop it onto your container element.
Frequently asked questions
When should I use Flexbox vs CSS Grid?
Flexbox is one-dimensional — it lays items out in a single row or column and is ideal for toolbars, nav bars, and distributing space along one axis. Grid is two-dimensional, controlling rows and columns together, which suits page layouts and card galleries. Many real layouts combine both: Grid for the overall structure, Flexbox inside each cell.
What's the difference between justify-content and align-items?
In Flexbox, justify-content positions items along the main axis (the direction set by flex-direction) while align-items positions them on the cross axis. Flip flex-direction to column and the two effectively swap which way they push items — toggling it in the preview makes this immediate.
What does repeat(3, 1fr) mean in grid-template-columns?
It creates three equal columns. The fr unit is a fraction of the available space, so repeat(3, 1fr) divides the container into three tracks of equal width. This generator emits repeat() automatically when you set a column or row count, or you can think of it as shorthand for "1fr 1fr 1fr".
Does this playground send my layout anywhere?
No. The CSS is generated locally in your browser with plain string building, and the preview renders client-side. Nothing is uploaded — the tool works fully offline.
Related tools
Everything runs locally in your browser — your input is never uploaded.