High Mountain Studio
Back to Tools

CSS Flexbox & Grid Playground

Build CSS layouts visually. Adjust properties, see real-time previews, and copy production-ready code.

Container Size:
1
2
3
4

Click an item to edit its properties

Container Properties
Main axis direction
Wrap items to new lines
Align along main axis
Align along cross axis
Align wrapped lines
16px
Space between items
Item Properties
Click an item in the preview to edit its properties
CSS Output
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 16px;
}

Tip: Flexbox is ideal for one-dimensional layouts (rows OR columns). Use it for navigation bars, card rows, and centering content.