CSS Flexbox/Grid Generator

Create beautiful CSS layouts with this interactive tool. Design with Flexbox or Grid layouts, visualize changes in real-time, and copy the generated CSS code for your projects. Perfect for both CSS beginners and experienced developers.

Switch between Flexbox and Grid to see how each layout method works. All your settings are automatically saved to your browser.

CSS Layout Preview

Settings

Direction

Justify Content

Align Items

Flex Wrap

Gap (8px)

Item Count (3)

Item Width

Item Height

Flex Grow (0)

Generated CSS

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

.item {
  width: 100px;
  height: 100px;
  flex-grow: 0;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}