Orveta

CSS Grid & Flexbox Live Layout Playground

Developer

Adjust sliders, watch the layout update, copy the CSS.

Controls

Every change updates the preview instantly.

12px
5

Live preview

1
2
3
4
5

Generated CSS

Copy this straight into your stylesheet.

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

About this tool

Switch between Flexbox and Grid, adjust direction, alignment, wrapping, gap, and item count with live sliders and dropdowns, and watch a real layout update instantly — then copy the exact CSS it took to build it.

How to use CSS Grid & Flexbox Live Layout Playground

  1. 1

    Choose Flexbox or Grid at the top.

  2. 2

    Adjust the dropdowns and sliders on the left — direction, alignment, wrapping, gap, and item count.

  3. 3

    Watch the live preview update instantly as colored boxes rearrange.

  4. 4

    Copy the generated CSS and drop it straight into your stylesheet.

Frequently asked questions