CSS Flexbox & Grid Layout Generator
Switch between Flexbox and Grid, then choose the direction, wrapping, alignment, gap and columns — the preview and the generated CSS update instantly. Change the number of items to see how wrapping and spacing behave. Copy the CSS and paste it straight into your stylesheet. For styling the boxes themselves, try the CSS Box-Shadow Generator and the CSS Gradient Generator.
🔒 Runs in your browser · Your data is never sent to a server
Set 0 to leave rows unspecified; they grow with the item count.
Preview
Notes
- The preview items are intentionally uneven in size so alignment differences are easy to see. Real results depend on the size of your own elements.
- align-content only has an effect when flex-wrap is wrap or wrap-reverse and the items form multiple lines, so it is omitted for nowrap.
- Grid columns and rows use equal-width repeat(n, 1fr). To vary track widths, edit grid-template-columns in the generated CSS by hand.
- The selector is fixed to .container. Replace it with your own class name.
Glossary
Flexbox
A layout model that arranges items along one direction (row or column). Set `display: flex` on the parent to control the order, alignment and spacing of its children.
Grid
A layout model that places items on rows and columns. Set `display: grid` on the parent and define the tracks with `grid-template-columns` and similar properties.
Main axis and cross axis
In Flexbox, the main axis is the direction items are laid out and the cross axis is perpendicular to it. `justify-content` aligns along the main axis, `align-items` along the cross axis.
fr
A Grid unit meaning a share of the remaining space. `repeat(3, 1fr)` creates three equal-width columns.
gap
The property that sets spacing between items in Flexbox and Grid. It applies only between items, not around the outer edge.
FAQ
When should I use Flexbox and when Grid?
Use Flexbox to lay items out along a single direction, row or column, and Grid when you need to control both rows and columns. Navigation bars and button rows suit Flexbox; card galleries and page skeletons suit Grid.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (the direction they flow), and align-items aligns them along the perpendicular cross axis. Setting flex-direction to column swaps the two axes.
Why is align-content missing from the output?
align-content aligns the lines of a wrapped flex container, so it has no effect when flex-wrap is nowrap. Choose wrap or wrap-reverse and it is included.
Can I change the selector in the generated CSS?
The selector is fixed to .container. After copying, replace it with your own class name or element selector.
Share this page