Grid / Flexbox Playground

Free online CSS Grid and Flexbox playground. Tweak rows, columns, gaps and alignment with live preview and generated CSS — the fastest way to learn layout.

10px
6
Live Preview
1
2
3
4
5
6
CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

💡 Adjust on the left, preview live on the right, copy standard CSS below

💡 Grid demo uses repeat(N, 1fr) columns; use any fr/px/auto mix in real projects

FAQ

Can I practice both Grid and Flexbox?
Yes — switch with one click. Grid mode: rows, columns, gap and item alignment. Flexbox mode: direction, wrapping, main/cross axis alignment and gap. Everything updates live.
Is the generated CSS production-ready?
Yes. It outputs standard CSS (display: grid / flex properties) supported by all modern browsers. Copy it into any project.
Is it good for CSS beginners?
Perfect for beginners. Drag a slider and watch colored blocks move instantly — far more intuitive than reading docs, and the side-by-side code builds property-to-effect memory fast.