Flexbox and Grid Playground

How to use the flexbox and grid playground

1. Pick a Layout: Flexbox or Grid, or start from one of the Presets (Centered, Navigation bar, Wrapping cards, Sidebar, Responsive card grid, Holy grail, 12 columns).
2. Set the Container properties. For flexbox: flex-direction and flex-wrap. For grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items and grid-template-areas. Both share justify-content, align-items, align-content, row-gap (px) and column-gap (px).
3. Manage the Items with Add item, Remove selected item and Reset selected item. Click an item in the preview (or tab to it and press Enter) to select it.
4. Edit the selected item: order and align-self in both modes, flex-grow, flex-shrink and flex-basis for flexbox, and grid-area, grid-column, grid-row and justify-self for grid.
5. Copy the CSS code and the matching HTML code with their Copy buttons.

Every control is a standard form field, so the whole playground works with the keyboard alone. The CSS only contains the properties you changed from their defaults, which keeps it short, and items with identical settings share one rule (.item when they all match).

Flexbox in a nutshell

Flexbox lays items out along one axis. flex-direction sets the main axis (a row or a column); justify-content distributes items along it (center, space-between…), and align-items positions them on the cross axis. With flex-wrap: wrap, items that do not fit move to a new line, and align-content then spaces those lines.

Each item has three sizing properties, usually written together as flex:

• flex-basis: the starting size (auto uses the content or width);
• flex-grow: how much of the free space the item takes (0 = none, 1 = an equal share);
• flex-shrink: how much it gives up when space is short (0 = never shrinks).

The Sidebar preset shows the classic pattern: a sidebar with flex-basis: 200px and flex-shrink: 0, and a main area with flex-grow: 1.

CSS Grid in a nutshell

Grid lays items out in two dimensions. grid-template-columns: repeat(3, 1fr) creates three equal columns; fr is a share of the free space. repeat(auto-fill, minmax(120px, 1fr)) creates as many columns of at least 120px as fit, which makes a responsive card grid without any media query.

Items fill the cells in order, unless you place them: grid-column: span 2 makes an item two columns wide, and grid-column: 1 / -1 stretches it across the whole row.

grid-template-areas lets you draw the layout with names. Type one row per line, for example header header then nav main, and give items grid-area: header or grid-area: main. A dot marks an empty cell. Every row needs the same number of cells and each name must form a rectangle; the tool warns you otherwise.