Flexbox & Grid Generator

Interactive Flexbox & Grid Playground

1
2
3
4
5
6
CSS Output
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

Missing a tool?

Tell us what you'd like us to build next. We read every suggestion, and your email is optional.

What this tool does

The Flexbox & Grid Generator is a playground for the two main CSS layout systems. Change the settings, watch the numbered boxes move, and copy the CSS for your container.

How to use it

  1. Choose Flexbox or CSS Grid.
  2. Change the settings and the number of items; the preview updates as you go.
  3. Copy the CSS from the box below and put it on your container element.

Flexbox settings

  • flex-direction: the main direction, a row or a column (or either one reversed).
  • justify-content: how items share space along that direction: packed at the start, center or end, or spread out (space-between puts the space only between items, space-around around each item, space-evenly makes every gap equal).
  • align-items: how items line up across the other direction: stretched, centered, at the start or end, or on their text baseline.
  • flex-wrap: whether items may wrap onto new lines.
  • gap: the space between items, for example 10px or 1rem.

Grid settings

  • grid-template-columns / rows: the size of each column or row. 1fr 1fr 1fr makes three equal columns; 200px 1fr a fixed sidebar and a flexible main area; repeat(auto-fit, minmax(150px, 1fr)) as many columns as fit.
  • gap: the space between rows and columns.

Flexbox or Grid?

Flexbox works in one direction at a time, which suits rows of buttons, navigation bars and items whose size comes from their content. Grid controls rows and columns together, which suits page layouts, card grids and anything that should line up both ways. They work well together: a Grid page layout with Flexbox inside each part.

Two common recipes

Center anything: on the container, display: flex; justify-content: center; align-items: center; centers its content both ways (give the container a height). With Grid, display: grid; place-items: center; does the same in one line.

A responsive card grid: display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; fits as many columns of at least 220 pixels as the screen allows and stretches them to fill the row. It goes from one column on a phone to four or five on a monitor without media queries. Try it by typing the columns value into Grid mode.

Frequently asked questions

Do all browsers support Flexbox and Grid?

Yes, every current browser, including gap for Flexbox.

Why doesn't align-items seem to do anything?

It needs room to work with: if the container is only as tall as its items, there's nothing to align. Give the container a height, or use a different value of justify-content.

Related tools: Box Shadow Generator, CSS Gradient Generator and Lorem Ipsum Generator.

Sources: MDN Web Docs, Basic concepts of flexbox and Basic concepts of grid layout. Last reviewed on SuiteWebTools: October 2026.