Which direction do justify-content and align-items control?

In Flexbox, justify-content distributes items along the main axis and align-items aligns them on the cross axis. The main axis follows flex-direction: horizontal for row, vertical for column — so the two properties swap visually when you switch. align-content only matters when items wrap onto multiple lines. In Grid, justify-* is always the inline (horizontal) axis and align-* is always the block (vertical) axis.

What does flex: 1 mean? Is it the same as flex-grow: 1?

flex: 1 is shorthand for flex: 1 1 0% — grow, shrink, and a base size of zero — so several flex: 1 items split the space exactly equally regardless of content. With only flex-grow: 1, flex-basis stays auto: items first take their content width and then share the leftover space, so items with more content end up wider. Toggle between the two in the playground to see it.

What’s the difference between auto-fill and auto-fit?

Both fit as many tracks as possible into a row. The difference shows when there aren’t enough items to fill it: auto-fill keeps the empty tracks, so items stay near their minimum size, while auto-fit collapses empty tracks to zero so the existing items stretch across the row. Card lists usually use repeat(auto-fill, minmax(200px, 1fr)).

Why isn’t my grid-template-areas working?

Three common reasons: every area name must form a single rectangle (no L-shapes or split areas), every row must have the same number of cells, and items must reference the area with grid-area. If any part is invalid, the browser ignores the entire grid-template-areas declaration. The areas editor flags non-rectangular areas and warns when the column count doesn’t match grid-template-columns.

🍱

🍱Flexbox & CSS Grid Generator - Visual Playground + Tailwind

Which direction does justify-content control, and which does align-items? What’s the difference between flex: 1 and flex-grow: 1? How many columns will repeat(auto-fill, minmax()) produce? Instead of refreshing a page to find out, see it here. In Flexbox mode you can set flex-direction, flex-wrap, justify-content, align-items, align-content and row/column gaps, and click any item in the preview to set its own flex-grow, flex-shrink, flex-basis, order and align-self. In Grid mode you can type any grid-template-columns and rows (fr, minmax, repeat, auto-fill and auto-fit all work), set justify/align for items and content, choose grid-auto-flow including dense, and place each item with grid-column, grid-row or a named area. The areas editor lets you drag across cells to name a rectangle header, sidebar and so on; it writes a neatly aligned grid-template-areas and checks that every area is a rectangle and that the column count matches your template. Change the number of items, the container size and the content length to watch wrapping and alignment. The output is available as CSS, HTML and Tailwind CSS classes (standard utilities where they exist, arbitrary values otherwise). Presets include centered content, a navbar, equal columns, wrapping cards, the holy grail layout, a sidebar, an auto-fill card grid and a dashboard.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Flexbox & Grid Playground

1Pick Flexbox or Grid, or start from a preset such as holy grail, sidebar or card grid
2Adjust container properties and click items in the preview to edit them; in Grid, turn on areas and drag to name cells
3Switch between the CSS, HTML and Tailwind tabs and copy the code

FAQ

Which direction do justify-content and align-items control?: In Flexbox, justify-content distributes items along the main axis and align-items aligns them on the cross axis. The main axis follows flex-direction: horizontal for row, vertical for column — so the two properties swap visually when you switch. align-content only matters when items wrap onto multiple lines. In Grid, justify-* is always the inline (horizontal) axis and align-* is always the block (vertical) axis.
What does flex: 1 mean? Is it the same as flex-grow: 1?: flex: 1 is shorthand for flex: 1 1 0% — grow, shrink, and a base size of zero — so several flex: 1 items split the space exactly equally regardless of content. With only flex-grow: 1, flex-basis stays auto: items first take their content width and then share the leftover space, so items with more content end up wider. Toggle between the two in the playground to see it.
What’s the difference between auto-fill and auto-fit?: Both fit as many tracks as possible into a row. The difference shows when there aren’t enough items to fill it: auto-fill keeps the empty tracks, so items stay near their minimum size, while auto-fit collapses empty tracks to zero so the existing items stretch across the row. Card lists usually use repeat(auto-fill, minmax(200px, 1fr)).
Why isn’t my grid-template-areas working?: Three common reasons: every area name must form a single rectangle (no L-shapes or split areas), every row must have the same number of cells, and items must reference the area with grid-area. If any part is invalid, the browser ignores the entire grid-template-areas declaration. The areas editor flags non-rectangular areas and warns when the column count doesn’t match grid-template-columns.