Skip to content
HQ8T

Flexbox & Grid Generator

Build flex and grid layouts visually; copy CSS.

Layout
1
2
3
4
5

Drag the bottom-right corner of the preview to test different widths.

CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
Tailwind classes
flex flex-row flex-wrap justify-start items-stretch gap-3
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

How to use

  1. 1Choose Flexbox or CSS Grid.
  2. 2Adjust direction, wrapping, alignment, columns and gap.
  3. 3Watch the live preview; drag its corner to test widths.
  4. 4Copy the CSS, Tailwind classes or HTML.

Frequently asked questions

When should I use Flexbox vs Grid?

Flexbox is best for one row or column of items; Grid is best for two-dimensional layouts with rows and columns.

What does auto-fit minmax do?

repeat(auto-fit, minmax(160px, 1fr)) makes as many columns as fit, each at least 160px wide — a responsive grid without media queries.

Are the Tailwind classes exact?

Yes for standard values; custom grid templates use Tailwind's arbitrary value syntax.

Does it work in all browsers?

Flexbox, Grid and gap are supported in all modern browsers.

Is my data uploaded?

No. Everything runs in your browser; nothing you paste is sent to a server.

You may also need