CSS Flexbox & Grid Playground
Click through every flexbox and grid property and watch a live layout change, with plain-English explanations, item sizes and grid line numbers — then copy the code as CSS, HTML, Tailwind or React.
At a glance
- Covers every flexbox container property (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and every flex item property (flex-grow, flex-shrink, flex-basis, align-self, order).
- Covers CSS grid too: grid-template-columns and -rows with fr, minmax(), repeat(auto-fill / auto-fit), grid-auto-rows, grid-auto-flow (dense), justify/align-items and -content, and line-based placement with spans.
- Each choice comes with a one-line explanation of what it does, and the preview shows the real size of every item in pixels, so flex-grow and flex-basis stop being guesswork.
- In grid mode the line numbers are drawn on the layout, and you can drag across the grid to place an item.
- Copies the layout as CSS, HTML, Tailwind CSS v4 classes or a React component; the Tailwind output is checked against the real Tailwind v4 compiler to produce the same CSS.
- Warns when order, reversed directions, dense packing or line placement make the visual order differ from the HTML — which screen readers and the Tab key still follow.
- Flexbox gap works in Chrome 84+, Firefox 63+ and Safari 14.1+; CSS grid in Chrome 57+, Firefox 52+ and Safari 10.1+ (MDN browser-compat data).
- Free, no sign-up; layouts are saved in your browser and can be shared as a link.
Step by step
How to build a layout with flexbox or grid
- 1
Pick Flexbox or Grid
Flexbox lays items out in one direction (a row or a column); grid places them in rows and columns at once. Or start from one of the examples.
- 2
Set the container
Click values such as justify-content: space-between or grid-template-columns: repeat(3, 1fr) and watch the preview.
- 3
Adjust single items
Click an item, then give it flex-grow, a fixed flex-basis, its own alignment, or grid lines and spans. In grid mode you can drag its area on the grid.
- 4
Test it
Drag the container width slider to see how the layout responds on narrow screens.
- 5
Copy the code
Choose CSS, HTML, Tailwind or React, then Copy or Download. Share builds a link to this exact layout.
Features
Everything you need, nothing you don’t
See what each property does
Every value is a button, and the preview updates as you click. A sentence under each property explains the current value — no need to keep a cheat sheet open.
Main axis, cross axis, made visible
The preview names the main and cross axes for the current flex-direction, so justify-content and align-items finally make sense when you switch to column.
Real sizes on every item
Change flex-grow, flex-shrink or flex-basis and watch each item’s width in pixels. Narrow the container to see shrinking and wrapping happen.
Grid lines you can draw on
Numbered grid lines sit over the layout. Turn on drawing and drag across cells to give an item its column and row lines.
Code in four flavours
Plain CSS with HTML, Tailwind CSS v4 classes, or a ready React component — with or without demo colours.
Ready-made layouts
Start from a centred box, navbar, wrapping cards, sidebar, sticky footer, responsive card grid, holy grail or dashboard and adjust from there.
Flexbox or grid?
Flexbox is for laying things out along one line — a navigation bar, a row of buttons, a card’s header and footer — where the content decides the sizes and items may wrap. Grid is for two-dimensional layouts — page structure, galleries, dashboards — where you define the columns and rows first and place items into them.
They work well together: a grid for the page, flexbox inside each card.
The properties people mix up
In flexbox, switching flex-direction to column swaps the axes: justify-content then works vertically and align-items horizontally. justify-items does nothing in flexbox.
| Property | Works along | What it moves |
|---|---|---|
| justify-content | Main axis (flex) / inline axis (grid) | The items as a group (flex) or the whole set of tracks (grid) |
| align-items | Cross axis (flex) / block axis (grid) | Each item inside its line or grid area |
| align-content | Cross axis | Whole lines of wrapped items (flex) or rows of tracks (grid) |
| justify-items | Inline axis (grid only) | Each item inside its grid area |
| align-self / justify-self | Same as align-items / justify-items | One item, overriding the container |
flex-grow, flex-shrink and flex-basis
- flex-basis is the starting size along the main axis.
autouses the item’s width (or its content);0ignores content so space is shared purely by flex-grow. - flex-grow shares out leftover space: an item with 2 gets twice as much of the extra as an item with 1. With 0 it never grows.
- flex-shrink decides who gives up space when there is not enough; 0 means the item never shrinks below its basis.
- The shorthand
flex: 1means1 1 0%;flex: automeans1 1 auto;flex: nonemeans0 0 auto. This tool always writes all three values so nothing is hidden.
auto-fill vs auto-fit
repeat(auto-fill, minmax(140px, 1fr)) makes as many 140px-or-wider columns as fit, keeping empty columns when there are few items. auto-fit does the same but collapses empty columns, so a few items stretch across the full width. Load the Responsive cards example, remove items and switch between the two to see the difference.
FAQ
Frequently asked questions
What is the difference between justify-content and align-items?
Why does align-content do nothing?
Why does my flex item not shrink below its text?
What does 1fr mean in CSS grid?
Is the Tailwind code for Tailwind v3 or v4?
Can I use gap with flexbox?
Does order change the reading order?
Is my layout saved?
Keep going
Related tools
Bento Grid Generator
Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.
CSS Box Shadow Generator
Free CSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
CSS Glassmorphism Generator
Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.
Responsive Design Tester
Test a website on phone, tablet, laptop and desktop screen sizes side by side. Works with localhost and pasted HTML; shows Tailwind and Bootstrap breakpoints.
CSS Neumorphism Generator
Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.
Last updated Report a problem or suggest a feature