The Flexbox playground
Arrange a navigation row, center a card, or share space unevenly. Follow the axes and discover how alignment, wrapping, and sizing interact.
Try: a centered card → a vertical stack
Open Flexbox →A LITTLE ROOM TO EXPERIMENT
Change a value. See what happens.
Two focused tools for turning CSS rules into something you can see. Start with a preset, select an item, and explore.
The CSS Grid playground
Build equal card tracks, combine a sidebar and content, or let a header span across columns. Explore explicit and implicit rows.
Try: an equal card grid → a mixed-span gallery
Open Grid →No code is executed from visitor input. These tools generate layouts from validated controls. Downloaded examples work locally without scripts or external assets.