- Choose Layout Mode — Click Flexbox or Grid tab. Flexbox is ideal for one-dimensional layouts (rows or columns). Grid is for two-dimensional layouts (rows AND columns simultaneously).
- Configure Container — In Flexbox mode: set direction, wrap, justify-content, align-items, and gap. In Grid mode: define grid-template-columns (e.g. '1fr 1fr 1fr', '200px auto 1fr'), grid-template-rows, and gap.
- Add/Remove Items — Click '+ Add Item' to add colored items to the layout. Click '− Remove' to remove the last item.
- Edit Individual Items — Click any numbered item in the preview to select it. In Flexbox: adjust order, flex-grow, flex-shrink, and align-self. In Grid: set column span and row span.
- Copy CSS — The generated CSS code updates live as you change settings. Click 'Copy CSS' to copy the syntax-highlighted code for your project. Only non-default properties are included for clean output.
CSS Flexbox & Grid Playground — Learn and Build Layouts Visually
The CSS Flexbox & Grid Playground is a free, interactive tool for learning and building CSS layouts visually. Toggle between Flexbox and Grid modes, adjust properties with intuitive controls, see the results in a live preview, and copy the generated CSS code — all without writing any code yourself.
Whether you're learning CSS layout for the first time or need a quick visual reference for complex properties like justify-content, align-items, or grid-template-columns, this playground makes it effortless.
Key Features
- Flexbox Mode — Full control over flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (6 options), align-items (5 options), and gap. Every combination is demonstrated instantly in the live preview.
- Grid Mode — Define grid-template-columns and grid-template-rows with any valid CSS value (fr, px, auto, minmax, repeat). Adjust gap and see the grid materialize in real-time.
- Per-Item Properties — Click any item in the preview to customize it individually. In Flexbox: order (-5 to 10), flex-grow (0–5), flex-shrink (0–5), and align-self. In Grid: column span and row span (1–6).
- Live Preview — Colorful, numbered items respond instantly to every property change. Add up to 12+ items with automatic color coding.
- Clean CSS Generation — Generated CSS uses proper syntax highlighting (selectors, properties, values in different colors). Only non-default properties are included — no bloat.
- One-Click Copy — Copy the entire generated CSS to your clipboard instantly.
- Add/Remove Items — Dynamically add or remove layout items to test different configurations.
- Responsive — The playground itself adapts to mobile screens with a stacked layout.
Flexbox Properties Explained
- flex-direction — Sets the main axis: row (horizontal, default), column (vertical), or their reverses.
- flex-wrap — Controls whether items wrap to new lines when they overflow the container.
- justify-content — Aligns items along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly.
- align-items — Aligns items along the cross axis: stretch, flex-start, flex-end, center, baseline.
- gap — Adds spacing between items without affecting outer margins.
- order — Changes visual order without modifying HTML. Lower values appear first.
- flex-grow/shrink — Controls how items expand or contract relative to siblings.
Grid Properties Explained
- grid-template-columns — Defines column sizes. Examples: '1fr 1fr 1fr' (3 equal), '200px 1fr' (sidebar + fluid), 'repeat(auto-fill, minmax(200px, 1fr))' (responsive).
- grid-template-rows — Defines row sizes. 'auto' lets rows size to content.
- grid-column: span N — Makes an item span N columns in the grid.
- grid-row: span N — Makes an item span N rows in the grid.
Use Cases
- Learning CSS — Visualize how each Flexbox and Grid property affects layout in real-time.
- Rapid Prototyping — Quickly design layouts and copy the CSS into your project.
- Teaching — Use as a classroom demo tool to explain CSS layout concepts.
- Reference — Quick visual cheat sheet when you forget what 'space-evenly' does vs 'space-around'.
- Debugging — Reproduce layout issues to understand unexpected flex/grid behavior.
Privacy
The CSS Flexbox & Grid Playground runs entirely in your browser. No data is transmitted or stored. The tool works completely offline once loaded.