Advertisement
Guide
About the Flexbox / Grid Playground
Flexbox and CSS Grid are the two pillars of modern web layout, but their properties — justify-content, align-items, flex-direction, grid-template-columns — are easy to mix up. This playground lets you toggle each property and watch a live grid of items rearrange instantly, so you learn by seeing rather than guessing. When it looks right, copy the CSS.
It covers both layout systems in one place and runs entirely in your browser, making it a fast way to prototype a layout or understand exactly what a property does.
Flexbox vs. Grid — which to use
Flexbox is one-dimensional: it lays items out in a single row or column and is ideal for toolbars, navigation, and distributing space along one axis. Grid is two-dimensional: it controls rows and columns together, making it the right choice for page layouts and card grids. They work well together — Grid for the overall structure, Flexbox for the contents of each area.
The properties that trip people up
In Flexbox, justify-content aligns items along the main axis and align-items along the cross axis — and which is which flips when you change flex-direction from row to column. Toggling these live is the quickest way to build an intuition for how they interact, instead of memorizing rules.
How to use it
- 1Choose Flexbox or Grid mode.
- 2Toggle properties like justify-content, align-items, direction, columns, and gap.
- 3Watch the item grid rearrange live.
- 4Copy the generated CSS into your stylesheet.
Frequently asked questions
When should I use Flexbox vs. Grid?
Use Flexbox for one-dimensional layouts (a single row or column, like a navbar) and Grid for two-dimensional layouts where you control rows and columns together, like a page or card grid.
What is the difference between justify-content and align-items?
In Flexbox, justify-content distributes items along the main axis and align-items aligns them on the cross axis. Which direction each affects depends on flex-direction.
Can I use Flexbox and Grid together?
Yes, and it is common. Grid often defines the overall page structure while Flexbox arranges the items within each grid area.
Does this generate real, usable CSS?
Yes. The CSS it produces is standard and can be pasted directly into your stylesheet.
Is anything uploaded?
No. The playground runs entirely in your browser.