Flexbox / Grid playground
Flexbox and Grid, live
Presets
Container
align-content only applies when items wrap onto several lines (flex-wrap: wrap).
Preview
Click an item to set its properties. Resize the preview from its bottom-right corner.
The items' minimum sizes are for the preview only: they are not in the CSS.
Item 1 selected
Code
.container {
display: flex;
gap: 8px;
}About this tool
This playground helps you understand and tune a Flexbox or CSS Grid layout without going back and forth with your editor. In flex mode you change flex-direction, flex-wrap, justify-content, align-items, align-content and gap. In grid mode you type grid-template-columns and grid-template-rows, or pick a common value such as repeat(auto-fill, minmax(120px, 1fr)), then set grid-auto-flow, justify-items and align-items.
Each item, up to 12 of them, has its own settings: flex-grow, flex-shrink, flex-basis, order and align-self in flex mode; column and row span or start and end lines in grid mode. Six presets give you a starting point: centering, navigation bar, sidebar, responsive cards, Holy Grail and a bento grid. The generated CSS only includes properties that differ from their default values.
How to use it
- Start from one of the "Presets" or pick "Flexbox" or "Grid" under "Layout mode".
- Under "Container", set the alignment properties and the "Spacing (gap)".
- Click "Add an item" if needed, then click an item in the "Preview" to edit its properties.
- In grid mode, choose the item's "Placement": "Automatic", "Span" or "Lines".
- Click "Copy CSS".
Frequently asked questions
How is the generated CSS organized?
It has a .container rule with display: flex or grid and the properties you changed, followed by .item-1, .item-2 and so on for every item that differs from the defaults. Rename those selectors to match your own class names.
Why does align-content do nothing?
align-content distributes the lines of a flex container, so it only applies when items wrap with flex-wrap: wrap or wrap-reverse. With nowrap, the tool points this out and leaves the property out of the generated CSS.
How do I make a grid item span several columns?
Select the item, choose the "Span" placement and enter how many columns or rows it should cover. The "Lines" placement sets explicit start and end lines instead, where 0 means auto and -1 is the last line.
Are the preview item sizes part of the CSS?
No. Items in the preview get varied minimum sizes so the effect of each alignment stays visible, but those sizes are not in the copied code. You can also resize the preview area from its bottom-right corner.