CSS Flexbox & Grid Playground

Flexbox is a one-dimensional layout model. A container with display:flex lays its children out along a main axis (row or column). justify-content distributes them along that axis and align-items along the cross axis. It is the right tool for navbars, button groups, wrapping card rows and a sidebar beside a main column.

CSS Grid is a two-dimensional layout model. You define column and row tracks, then place items on that grid — including items that span several cells. It is the right tool for page shells, dashboards, galleries and anything that needs simultaneous control of rows and columns.

Use Flexbox when the layout is one-dimensional — a row of controls, a wrapping card list, or a sidebar plus main. Use Grid when you need two dimensions at once: a header, sidebar, main and footer; a dashboard of mixed spans; or named regions. They compose: a Grid page can contain Flexbox toolbars.

In Flexbox, justify-content works along the main axis (horizontal in a row, vertical in a column) and align-items works along the cross axis. In Grid, justify-items and align-items position each item inside its cell, while justify-content and align-content pack the whole grid when it is smaller than the container.

flex-grow is the share of leftover space an item is allowed to take. 0 means it keeps its size; 1 means it grows equally with other growing siblings; 2 means it takes twice as much leftover space as an item with grow 1. It does not make an item twice as wide as another unless they started from the same basis.

fr is a fraction of leftover free space after fixed tracks are laid out. repeat(3, 1fr) makes three equal columns. 200px 1fr makes a 200 pixel sidebar and a main column that takes the rest. fr tracks shrink when the container shrinks, unlike a raw percentage of a parent that may overflow.

Both fill a row with as many minmax() tracks as will fit. auto-fill keeps empty tracks, so leftover space stays as empty columns. auto-fit collapses empty tracks and the remaining items stretch to fill the row. Use auto-fit for a card gallery that should look full even with two cards.

You name regions in a string grid that matches your columns and rows, then assign items with grid-area. A holy-grail layout is three quoted rows such as "header header header" then "nav main aside". Identical names in adjacent cells merge into one region. The playground emits those quoted strings for you.

Yes. The code panel updates on every change. Copy CSS, HTML, or both together, or download a standalone HTML file that renders the layout with item colours included.

Yes. On narrow screens the studio becomes Controls, Preview and Code tabs so the playground stays large enough to judge the layout.

Yes for the layout itself. Default per-item rules are omitted, so you only get declarations you actually changed. Colours in the preview are for the playground; the downloaded page includes them as a demo, while copied CSS is the layout rules only.

Yes. It is free, needs no account, and has no export limits or watermarks.

In Flexbox, align-content only runs when there is more than one line of items, so flex-wrap must not be nowrap. In Grid it packs extra space between tracks when the grid is smaller than the container. This playground omits align-content from the Flex CSS until wrapping is on, so the exported rule matches what you can actually see.

No. order and grid-auto-flow: dense change visual placement only. Tab order and screen-reader order still follow the HTML. If a visually first item should also be first for the keyboard, move it in the markup rather than using order.

No. The playground runs entirely in your browser. Autosave writes to your own browser storage only, and the share link encodes the layout in the page address rather than on a server.