About the CSS Flexbox & Grid Generator
This tool is a playground for the two CSS layout systems. Switch between Flexbox and Grid, change the container properties and watch the numbered items rearrange, then copy the CSS. The output only lists properties you changed from their defaults, so it stays short.
In Flexbox mode you can set flex-direction, flex-wrap, justify-content, align-items, align-content and gap. In Grid mode you can write grid-template-columns and grid-template-rows (with presets for equal columns, responsive cards, a sidebar and a three-column layout) and set justify-items, align-items, grid-auto-flow and justify-content.
Click an item to give it its own settings: flex-grow, flex-shrink, flex-basis, order and align-self for flex items, or grid-column and grid-row spans for grid items. Drag the corner of the preview to resize the container and see how the layout wraps.
How to use it
- Choose Flexbox or Grid, and how many items to show.
- Change the container settings.
- Click an item to change it individually.
- Copy the CSS.
Examples
- Flexbox playground: starts with five items in a row.
- Grid playground: starts with three equal columns.
Common questions
When should I use grid instead of flexbox?
Use flexbox to lay out items along one line that can wrap, like a toolbar or a row of tags. Use grid when you need rows and columns to line up, like a card gallery or a page layout.
Why doesn't align-content do anything?
It only applies when flex items wrap onto more than one line and the container has spare height. Set flex-wrap: wrap and add items to see it.
What does repeat(auto-fill, minmax(120px, 1fr)) do?
It fits as many columns of at least 120px as the container allows and stretches them to fill the row: responsive cards without media queries.
Related tools
- CSS Box Shadow Generator: style the cards in your layout.
- CSS Gradient Generator: add a background.