CSS Layout Playground

Build Flexbox and Grid layouts visually and copy the generated code.

Presets:

Container

Items (3)

Item 1
Item 2
Item 3

Preview

1
2
3

Generated Code

CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

.item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
HTML
<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

About This Tool

How to Use
  1. Choose Flexbox or Grid mode
  2. Adjust container properties using the controls
  3. Add or remove child items and customize their properties
  4. Copy the generated CSS and HTML code
Common Use Cases
  • Learning CSS Flexbox and Grid layout visually
  • Quickly prototyping page layouts without writing code
  • Generating CSS code for common layout patterns
  • Teaching CSS layout concepts to students
Tips & Tricks
  • Start with a preset layout and modify it to learn how properties work
  • Use the gap property for consistent spacing between items
  • Grid's repeat() function is powerful for responsive layouts
  • Copy the generated code directly into your project

Related Tools

CSS Gradient Generator

Create beautiful CSS gradients visually. Choose between linear, radial, and conic gradient types, add multiple color stops, and copy the ready-to-use CSS background property directly into your stylesheet.

Prettier Code Formatter & Colorizer

Reformat and colorize your code using Prettier and react-syntax-highlighter. Easily convert messy code into a clean, readable format with syntax highlighting.

Code Screenshot Generator

Turn any code snippet into a beautiful, shareable screenshot. Choose from popular syntax themes, select your language, adjust padding and background, then export as a high-quality PNG — no Carbon account required.

Diagram Editor

Build flowcharts and diagrams visually with drag-and-drop nodes, connecting arrows, and auto-layout. Export your diagrams as PNG images or save them as JSON to reload later.