# Flexbox & CSS Grid Generator - Visual Playground + Tailwind

> Interactive Flexbox and CSS Grid playground: tweak container and item properties live, drag to name grid-template-areas, and copy CSS, HTML or Tailwind classes.

- URL: https://qilingtools.com/en/flex-grid
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Education](https://qilingtools.com/en/tags/education), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

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.

## How to use

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

## Features

- Live preview of every common Flexbox container and item property
- Grid templates with fr, minmax, repeat, auto-fill and auto-fit
- Drag-to-name grid-template-areas with alignment and rectangle checks
- Place items precisely with grid-column, grid-row or grid-area
- CSS, HTML and Tailwind class output
- 8 common layout presets
- Adjustable item count, container size and content length
- Runs entirely in the browser with instant feedback

## 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.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.