CSS Flexbox & Grid Playground
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}How it works
Switch between Flexbox and Grid mode and build a layout by adjusting real CSS properties through simple controls. On the container you can set direction, justify and align, wrap, and gap; on each child you can change grow, shrink, order, and alignment. Add or remove items to see how the layout responds, and the live preview updates as you change any value. The generated CSS sits in a panel ready to copy, so you can paste a working flex or grid setup straight into your project instead of guessing property combinations. It is a fast way to learn how flex-grow, align-items, grid-template-columns and friends actually behave, or to prototype a responsive layout before writing it by hand. Everything runs in your browser, with no build step, no account, and nothing uploaded anywhere.
Frequently Asked Questions
Does it support both Flexbox and Grid?
- Yes. Switch between the Flexbox and Grid tabs; each one has its own set of container and item controls.
Can I copy the generated CSS?
- Yes. The CSS output panel shows the exact code the current layout needs, and the Copy button puts it on your clipboard.
Is my data stored anywhere?
- No. Everything runs in your browser, and no data is uploaded to any server.