Developer

CSS Grid & Flexbox Generator

Pick Grid or Flexbox, tweak the settings and watch the layout change instantly. The preview uses the exact CSS you copy.

Layout settings

Layout type
3
2
justify-items (horizontal, inside each cell)
align-items (vertical, inside each cell)
16px
6

100–1600px

100–1000px

Live preview

The dashed outline is the container. It uses the exact CSS below, so it narrows on small screens just like your page will.

1
2
3
4
5
6

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 600px;
  height: 320px;
}

.item {
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
}

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 class="item">6</div>
</div>

  • Visual layout builder

    Change columns, rows, direction, wrapping, gap and alignment with sliders and buttons — no typing needed.

  • What you see is what you copy

    The preview is rendered from the generated CSS itself, so there are no surprises when you paste it.

  • Responsive by default

    Containers use width: 100% with a max-width, so the layout shrinks to fit phones instead of overflowing.

Grid or Flexbox — which one?

Both are built into every modern browser. Flexbox lays items out in one direction — a row or a column — and is ideal for navbars, button groups and centring things. CSS Grid works in two directions at once, so it suits page layouts, card galleries and dashboards.

How to use it

  1. Choose Grid or Flexbox.
  2. Set columns and rows (Grid) or direction and wrapping (Flexbox), then the gap and alignment.
  3. Check the live preview, then copy the CSS and HTML into your project.

Alignment cheat sheet

  • justify-content (Flexbox): spreads items along the main axis — the row, or the column when direction is column.
  • align-items: positions items on the cross axis. stretch makes them fill it.
  • justify-items (Grid): positions each item horizontally inside its cell.
  • gap: space between items — no more margin hacks.

Tip: with 1fr columns the grid always fills the container, so use justify-items rather than justify-content to move items within their cells.

Private by design. Everything runs in your browser — nothing you enter is uploaded or stored by AISeekho.

More free tools