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 with the mode toggle, then set the container properties with plain dropdowns and number inputs: in Flex mode you control flex-direction, flex-wrap, justify-content and align-items; in Grid mode you set how many columns and rows (rendered as repeat(n, 1fr)) plus justify-items and align-items. A gap value and an item count apply to both. A live preview of numbered tiles shows exactly how your alignment and spacing behave, and the full .container CSS rule is generated for you to copy. Reach for it whenever you want to see how a flex or grid setting actually looks before pasting it 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. In Flex mode, set flex-direction, flex-wrap, justify-content and align-items from the dropdowns.
3. In Grid mode, set the number of columns and rows, plus justify-items and align-items.
4. Open Settings to change the gap (spacing in px) and the number of items shown in the preview.
5. Watch the live tile preview rearrange as you change each property.
6. Copy the generated .container CSS rule and paste it into your stylesheet.

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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Frequently asked questions

What is the difference between Flexbox and Grid here?

Flex mode lays items out along a single axis and exposes flex-direction, flex-wrap, justify-content and align-items. Grid mode arranges items in a two-dimensional grid using grid-template-columns and grid-template-rows (written as repeat(n, 1fr)) with justify-items and align-items. Switch modes with the toggle to compare how each model handles the same alignment.

What does the gap value do?

Gap sets the space, in pixels, between every item in both Flex and Grid layouts via the CSS gap property. Increase it to spread tiles apart or set it to 0 for a flush layout; the preview and the generated CSS both update instantly.

Why are justify-content and align-items written differently in Grid?

Grid uses the keywords start, end, center and stretch for justify-items and align-items, while Flex uses flex-start and flex-end. The tool outputs the correct keywords for whichever mode you are in, so the copied CSS is always valid.

Can I change how many items are shown?

Yes. Open Settings and change the item count to add or remove the numbered preview tiles (up to 24). This only affects the on-screen demonstration; the generated CSS describes the container, not the items themselves.

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.