Flexbox & Grid Generator

Visual layout builder for Flexbox and CSS Grid. Export CSS or Tailwind.

Justify

Align

Gap

Direction

Wrap

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
}

Frequently Asked Questions

Yes, the tool is free and runs in your browser.

Yes, you can copy Tailwind utility classes.

Was this helpful?

Design custom border radius with asymmetric corners

Create layered box shadows with CSS and Tailwind output

Convert CSS styles to Tailwind utility classes