CSS Layout Workbench
Switch between Flexbox and Grid on the same container, tune container and item properties, read each item's DevTools-style box model, and copy the container and item CSS.
CSS Layout Workbench
Switch between Flexbox and Grid on the same container, tune container and item properties, read each item's DevTools-style box model, and copy the container and item CSS.
How the layout workbench works
Flexbox and Grid on the same container
Switch the mode at the top and the same items rearrange under the other model. Flexbox controls the main and cross axis; Grid shows numbered lines so you can place an item from line 1 to line 3. Each mode keeps its own container settings, so you can compare the two answers to the same layout question.
Every item exposes its box model
Click an item and expand its box model to see the DevTools-style diagram with measured content, border-box and margin-box sizes. Change padding, border, margin or box-sizing and watch the layout react; the item's rule in the CSS output picks up the same declarations.
FAQ
Common questions and answers about this topic.
Where did the Flexbox playground, Grid playground and box model visualizer go?
They are the two modes and the per-item box model panel of this workbench. The old addresses still work and open the workbench in the matching mode; the box model address opens the flex mode with the first item's box model expanded.
Why are the box model sizes measured instead of typed in?
In a real layout the item's size comes from the container, its flex-basis or its grid tracks, not from a width you typed. Measuring the rendered box is what DevTools does, and it shows exactly how box-sizing changes what your padding and border do to that size.
Is anything sent to a server?
No. The preview, the measurements and the CSS are computed in your browser; there is no account, no upload and no saved history.