FIRST CH TOOLS / DESIGN / 62 FLEXBOX & CSS GRID GENERATOR

Flexbox & CSS Grid Generator

Work out your layout CSS by moving the controls, then take the code home. Flexbox covers justify-content, align-items, gap and flex-wrap; Grid covers template columns and rows plus grid-template-areas. Every value you pick explains what it does, and the tool flags the declarations that cannot take effect with your current combination.

Preview Box height200px

The dashed box is the container (.layout) and the orange boxes are the items. Click a box to edit that item. If the tracks add up to more than the frame, the frame scrolls sideways — the same overflow would happen on a real page.

Container properties (Flexbox)

display

flex makes a full-width block; inline-flex makes a box that sits in a line of text and shrinks to its content.

flex-direction

Sets the main axis the items are laid out along. This one property changes what the others mean.

flex-wrap

Whether items that do not fit move onto the next line.

justify-content

How the free space on the main axis is handed out (left/right placement in a row).

align-items

How items line up on the cross axis (the one at right angles to the main axis) — vertical placement in a row.

align-content

Where the block of wrapped lines sits once there are two or more of them. With a single line nothing happens.

gap (row) 12px

gap (column) 12px

Space between the items only — never on the outside. When the two values match they are written as a single gap: 12px.

items 4 items

Vary the content size

Preview settings only — they do not appear in the generated CSS. Identical boxes hide what align-items does, so the sizes vary by default.

Selected item

flex-grow 0

The share of the free space this item takes. At 0 it does not grow; set exactly one item to 1 and it absorbs all the slack, pushing the rest to the edge.

flex-shrink 1

How readily the item gives up width when space runs out (1 by default). Set it to 0 to stop icons and buttons being squashed.

flex-basis

The starting size the growing and shrinking is calculated from. auto means the content size; 0 means share the whole line out from scratch.

align-self

Overrides align-items for this item only.

order 0

Painting position (0 by default; lower comes first). Only the visual order changes — tab order and screen readers still follow the HTML, so use it sparingly.

Tracks and areas (CSS Grid)

Wrap the columns automatically (repeat(auto-fit, minmax()))

grid-template-columns

grid-template-rows

fr is a share of the leftover space, auto is the content size, and minmax(160px, 1fr) means "never below 160px, but take a share of the rest". Runs of identical tracks are written back as repeat().

gap (row) 12px

gap (column) 12px

The gutters between cells. fr is worked out from the space left after the gaps, so widening a gap never pushes the tracks out of the container.

grid-auto-flow

The direction items without an explicit position are placed in.

justify-items

Horizontal placement of each item inside its cell.

align-items

Vertical placement inside the cell. Together with justify-items it can be written as one place-items line.

justify-content

Where the whole grid sits horizontally inside the container — this moves the block of tracks, not the contents of the cells.

align-content

Where the whole grid sits vertically. With no height on the container there is no spare room, so nothing moves.

items 6 items

A preview setting. Items beyond the number of tracks land in implicit tracks sized by grid-auto-rows.

grid-template-areas Lay out by name

While this is off, the items are placed by auto-flow.

Selected item

column span 1

How many columns the item covers, written as grid-column: span 2;.

row span 1

How many rows it covers. Set both to 2 and you get one 2×2 block.

What each property means, and where people trip

Flexbox is one direction, Grid is two

Use Flexbox when things sit in a single row (or column) and Grid when you need rows and columns to line up. Navigation, button groups and a label beside an input are shorter in Flexbox. Tiling cards so their edges align, or framing a page as header / sidebar / content, is Grid. Nesting the two is normal — you do not have to pick one for the whole project.

Main axis and cross axis swap with flex-direction

In Flexbox, justify-content works on the main axis and align-items on the cross axis. With flex-direction: row the main axis is horizontal, so the first moves things left and right and the second up and down — and with column the two swap roles entirely. Most "align-items: center does not centre it vertically" reports come down to the direction being column.

When justify-content does nothing

This property only distributes the space that is left over. If an item has flex-grow: 1 (or flex: 1) the items swallow all of it, so there is nothing to distribute and no value makes any difference. The same is true in Grid: with a 1fr track present, justify-content is inert. Remove the growing before you reach for the alignment.

align-content moves lines, not items

The names look alike, but align-items positions items within a line while align-content positions the wrapped lines themselves. With flex-wrap: nowrap there is only one line, so align-content does nothing at all. In Grid there are always several tracks, which is why align-content is what moves the grid vertically there.

space-between vs space-evenly

space-between pins the two ends to the edges and puts all the space between the items. space-around gives every item the same space on both sides, which makes the outer gaps look half the size. The one that actually looks evenly spaced is space-evenly. Watch out for space-between in lists whose length varies: with a single item it looks exactly like flex-start.

flex: 1 is really three values

flex is shorthand for flex-grow flex-shrink flex-basis, and flex: 1 expands to 1 1 0%. A basis of 0 tells the browser to ignore the content width and share the whole line out by the grow factors, which is how three boxes with different amounts of text end up exactly equal. flex: 1 1 auto reserves the content width first and only shares the remainder, so identical grow values still give unequal boxes. For equal columns, set the basis to 0.

A flex item will not go below its content

Flex items carry min-width: auto, so they never shrink past the minimum width of their content. A box holding a long URL, a table or a pre block overflowing the row, or text-overflow: ellipsis refusing to work, is almost always this. Add min-width: 0 to that item (min-height: 0 in a column). Grid's 1fr has the same auto minimum — there you write minmax(0, 1fr).

fr is a share of the leftovers, not a percentage

1fr 1fr 1fr looks like thirds only because the leftovers happen to be everything. Put a fixed track in — 240px 1fr — and the 1fr receives whatever remains after 240px and the gaps. 1fr 2fr is a 1:2 split; 50% 1fr is "half, then the rest". Percentages ignore the gaps, so 100% of tracks plus a gap always overflows — staying with fr is safer than mixing fixed widths and percentages.

auto-fit and auto-fill differ in one way

repeat(auto-fit, minmax(200px, 1fr)) is the standard card row that wraps without a media query. The only difference from auto-fill is whether the empty leftover tracks are collapsed or kept. On a wide screen holding two cards, auto-fit stretches them across the row while auto-fill leaves them at their own width with a gap on the right. Which one is correct depends on the picture you want.

grid-template-areas is all or nothing

Naming the areas makes the CSS readable as a diagram of the page. Two rules come with it: every row needs the same number of cells, and each name has to form a rectangle. An L shape or a split name makes the browser discard the whole value, and one mistyped cell collapses the entire layout. This tool checks both on every keystroke. An empty cell is a single ..

gap never lands on the outside

Because gap only goes between items, you no longer need the "strip the margin off the last child" rule, and margins cannot collapse through it. The one caveat is support: gap in Flexbox needs Safari 14.1 (2021), while gap in Grid has been around much longer. Older Safari simply loses the spacing; the layout itself does not break.

Reordering does not reorder the reading

order, row-reverse, grid-auto-flow: dense and placing by area name all change the painting order only. Tab order and screen-reader order stay with the HTML, so the visual sequence and the keyboard sequence disagree and keyboard users jump back and forth across the page. Reorder in one place for one breakpoint at most, and otherwise write the HTML in reading order.

The shortest way to centre something

Dead centre is two lines: display: grid; place-items: center; (place-items is shorthand for align-items and justify-items). The Flexbox equivalent is display: flex; align-items: center; justify-content: center;. Both draw the same picture, but Grid is shorter for a single child while Flexbox suits several children that also need space distributed between them.

Implicit tracks (the rows you never wrote)

When there are more items than tracks, the browser adds rows you did not declare — implicit tracks. Their height comes from grid-auto-rows, which defaults to auto (content height). "Only the third row is a different height" means grid-template-rows never mentioned a third row; set grid-auto-rows: 120px and every following row matches.

Items

1 line

Lines / tracks

Container declarations

CSS characters

Generated CSS

Matching HTML

Checks

To make the type follow the viewport, see the CSS clamp() calculator; for px and rem spacing, the PX ⇄ REM / EM converter; for backgrounds, the CSS gradient generator; and for card shadows, the box-shadow generator.

How to Use

Choose Flexbox or CSS GridOne row (or one column) with space handed out between the items is Flexbox; rows and columns that must line up is CSS Grid. Loading the nearest preset and editing it is usually the fastest route.
Move the controls and watch the previewEvery value you pick explains itself right below the control. Click a box in the preview to override flex or a span on that item alone. Declarations that cannot take effect are called out, with the reason.
Copy the CSS and the HTMLYou get the container declarations plus only those item declarations that differ from the defaults. Rename .layout to fit your project.

About This Tool

Layout CSS eats time in the write / reload / squint / adjust loop. This tool moves the Flexbox and CSS Grid properties — container and item — while updating the preview and the generated CSS together. The preview is drawn by pushing the very declarations that are written out into the element, so the picture on screen and the code you copy can never drift apart. The output contains the container rule plus the item rules that differ from the defaults; defaults such as flex-wrap: nowrap are left out.

Every property is explained, so it doubles as a way to learn the model. Each change prints a line describing what the property distributes and what the chosen value does. It also points out declarations that cannot work in the current combination: flex-grow leaving no free space for justify-content, align-content with flex-wrap: nowrap, justify-content against a 1fr track. Dead declarations like these are easy to miss in review and tend to survive in a codebase for years.

grid-template-areas is validated as you type. Per the spec, a value whose rows have different cell counts — or in which a name is not a rectangle — is discarded in full, so one mistyped cell takes the whole layout with it. This tool checks the cell count of every row and the shape each name occupies, and reports the reason before the layout breaks. The generated HTML reuses the area names as class names, so pasting the CSS and the HTML reproduces the same skeleton. Everything runs in your browser; nothing is uploaded.