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.

Live preview
1
2
3
4
5
6
7
8
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.