Flexbox & Grid Generator

How to use Flexbox & Grid Generator

1. Choose Flexbox for one-dimensional layout or Grid for two-dimensional.
2. Adjust the controls and watch the preview boxes rearrange live.
3. Copy the generated CSS for the container and the items.

Flexbox or Grid?

The rule that actually holds: Flexbox for one dimension, Grid for two.

Flexbox lays items along a single axis and lets them size themselves. Reach for it when you have a row of things whose widths depend on their content — a navigation bar, a button group, a card footer, anything centered.

Grid defines a two-dimensional structure that items are placed into. Reach for it when the layout exists independently of the content — a page skeleton, a photo grid, a dashboard, a form with aligned label and field columns.

The responsive grid that needs no media queries

This one line replaces most of the breakpoint code in a typical stylesheet:

grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));

It means: fit as many columns as will hold at least 272px, and let them share the leftover space equally. At 1200px you get four columns, at 800px three, at 560px two, at 320px one — with no breakpoints written anywhere.

The difference between auto-fit and auto-fill catches everyone once. With two items in a wide container, auto-fit stretches them to fill the row; auto-fill keeps them at their minimum and leaves empty tracks. Use auto-fit unless you specifically want the column rhythm preserved.

Alignment properties, and why they are confusing

The names describe axes, not directions, and the axes swap depending on flex-direction. That is the whole source of the confusion.

In Flexbox, justify-content works along the main axis and align-items across the cross axis. With flex-direction: row the main axis is horizontal, so justify-content moves things left and right. Switch to column and the same property now moves them up and down.

Grid is more predictable because both axes always exist: justify-* is inline (horizontal in English), align-* is block (vertical). The shorthands place-items and place-content set both at once, which is why place-items: center is the shortest reliable centering in CSS.

The gap property works in both, and replaced the margin-based spacing hacks entirely — it applies only between items, never at the edges.

What still catches people out

• A flex item will not shrink below its content. The default min-width: auto stops it. Add min-width: 0 — this is why long text overflows a flex container instead of ellipsising.
• flex: 1 is not flex-grow: 1. The shorthand also sets flex-basis: 0, which makes items equal width regardless of content. That is usually what you wanted, but not always.
• Percentage gaps in Grid resolve against the container, not the track, which produces surprising results in nested grids.
• Grid rows collapse when empty unless you give them an explicit height or a minimum.
• Margin auto still works. margin-left: auto on one flex item pushes it and everything after it to the end — often cleaner than restructuring the container.

Frequently asked questions