Flexbox & Grid Playground

Build Flexbox and CSS Grid layouts visually and copy the CSS

Build Flexbox and CSS Grid layouts visually — adjust container and per-item properties, add or remove items, watch the live preview, and copy the CSS. Everything runs in your browser.

directionwrapjustifyaligngap 8px

Item 1grow align-self

Item 2grow align-self

Item 3grow align-self

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

Related Tools

Box-Shadow Generator Build CSS box-shadows visually with layered shadows cubic-bezier() Editor Drag a curve to build a CSS easing function CSS clamp() Calculator Generate fluid clamp() font sizes Border-Radius Generator Round corners visually and copy the CSS

Get weekly dev tools and tips