CSS Flexbox & Grid Playground

What is CSS Flexbox & Grid Playground?

CSS Flexbox & Grid Playground is a free visual sandbox for learning and prototyping the two main CSS layout models, made for front-end developers, students and designers. Pick Flex or Grid, set the container properties, and open Settings to style individual children: order, flex-grow, flex-shrink, flex-basis and align-self in Flex mode, or grid-column/row span and align-self in Grid mode. Grid mode also offers custom track sizing — type any grid-template-columns/rows value such as 200px 1fr or repeat(auto-fit, minmax(120px, 1fr)) — and a visual grid-template-areas editor where you name each cell, which also creates named grid lines. A live preview of numbered tiles reflects every change, and you can export just the .container rule or the container plus per-item CSS to copy into your project.

How to use CSS Flexbox & Grid Playground

1. Choose Flex or Grid with the mode toggle to pick which layout model to build.
2. Set the container properties — flex-direction/wrap and justify/align, or the number of columns and rows with justify-items/align-items.
3. Open Settings to change the gap and item count, and to style each child (order, flex-grow/shrink/basis, align-self, or grid column/row span).
4. In Grid, switch track sizing to Custom to type your own grid-template-columns/rows — px, fr, minmax() or repeat(auto-fit/auto-fill, …).
5. Turn on the grid-template-areas editor and name each cell to place items by area.
6. Pick whether to export the container CSS only or the container plus per-item CSS, then copy the result.

Examples

Flex · direction row · justify-content center · align-items center · gap 12

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

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

Frequently asked questions

What is the difference between Flexbox and Grid here?

Flex mode lays items out along one axis and exposes flex-direction, flex-wrap, justify-content and align-items. Grid mode arranges items in two dimensions with grid-template-columns and grid-template-rows plus justify-items and align-items. Switch modes with the toggle to compare how each handles the same alignment.

How do I style individual items?

Open Settings and use the per-item controls to set order, flex-grow, flex-shrink, flex-basis and align-self (Flex) or grid-column/row span and align-self (Grid) for each child. Set Export to 'Container + items' and the tool adds a .container > :nth-child(n) rule for every item you customize.

Can I use custom track sizes like auto-fit or minmax()?

Yes. In Grid mode switch track sizing to Custom and type any valid grid-template-columns/rows value — pixels, fr units, minmax(), or repeat(auto-fit/auto-fill, minmax(120px, 1fr)) for responsive columns. The preview and generated CSS update as you type.

What does the grid-template-areas editor do?

Turn it on in Grid mode and name each cell of the grid; the tool assembles a grid-template-areas declaration and blank cells become a dot. Naming areas also creates named grid lines, and you can place a child into an area by typing its name in that item's grid-area field.

Is my data uploaded anywhere?

No. The playground runs entirely in your browser with JavaScript, so your settings and the generated CSS are never sent to a server. It works privately and even offline once the page has loaded.