Flexbox & Grid Playground

How to build layouts with flexbox and grid

Flexbox and grid are the two modern CSS layout systems. Flexbox arranges items along one axis — a row or a column. Grid arranges them along two axes at once — rows and columns. Between them, they cover almost every layout on the modern web.

1. Pick your system. Components like nav bars, button rows, and card decks are flexbox. Page layouts and galleries are grid.
2. Set the direction. For flexbox, choose row or column (and the reverse variants). For grid, choose how many columns you want — the items will fill rows automatically.
3. Spread the items. justify-content pushes items along the main axis (try space-between for a nav bar); align-items lines them up across it.
4. Space them evenly with gap — one number, no margin math.
5. Copy the CSS. The generated block goes on the container element — the parent that wraps your items.

The centering trick everyone googles

To center something perfectly with flexbox: display: flex; justify-content: center; align-items: center;. That's it — horizontal and vertical centering in three lines. No negative margins, no transforms, no wrapper divs.

Grid fractions without the math

The fr unit is grid's secret weapon: it means "a share of the leftover space". grid-template-columns: repeat(3, 1fr) gives three equal columns; 2fr 1fr gives a main column twice as wide as a sidebar. Type any template into the custom field above — including mixed units like 2fr 1fr 200px — and the preview will render it instantly.

When should I use flexbox vs grid?

Flexbox lays things out in one direction — a row or a column — and is best for components like nav bars, card rows, and form fields. Grid works in two directions at once — rows and columns — and is best for full page layouts and photo galleries.

What is the difference between justify-content and align-items?

justify-content spreads items along the main direction (horizontal for a row, vertical for a column); align-items spreads them along the other, cross direction. Flip flex-direction to column and the two axes swap.

What does the gap value do?

Gap puts even spacing between every item — rows and columns alike — without the double-margin headaches of old margin tricks. One value sets both; in raw CSS you can also use row-gap and column-gap separately.

What does fr mean in a grid template?

fr is a fraction of the free space. 1fr 1fr 1fr splits a row into three equal columns; 2fr 1fr makes the first column twice as wide as the second.

Why did my flex items shrink?

Flex items shrink by default (flex-shrink: 1) to fit the container. To keep their size, give them a fixed width or set flex-shrink: 0. This playground shows the default shrinking behavior.

Is my data sent anywhere?

No. Everything runs in your browser with plain JavaScript. Nothing is uploaded or stored.