Flexbox vs Grid Playground

Toggle layout mode, tweak alignment and track properties, and watch the container update instantly. The CSS readout maps every control to the rule you would write.

Controls

flex-direction main axis

justify-content main axis

align-items cross axis

flex-wrap

gap 12px

Flexbox is one-dimensional — main axis follows flex-direction; cross axis is perpendicular.

Live preview

Generated CSS

Legend: Dashed outer box = available space. Solid inner box = .container. Colored squares = flex/grid items. In Flexbox, justify-content distributes along the main axis; align-items along the cross axis. In Grid, justify-items / align-items position items inside their cells. Resize the iframe to see auto-fit vs auto-fill behavior.