Web development
Flexbox or Grid: what designers need to know
The difference is not technical: it is the mental model you use to turn Auto Layout into CSS. A map between what you draw and what the browser can do.
Key points
- Flexbox lays out on one axis, Grid on two: that is the decision, not the number of items.
- Auto Layout is neither flex nor grid: it is a constraint model that needs translating.
- What breaks a layout is almost always a fixed height or a percentage gap.
Designers do not have to write CSS, but they must know which model they are asking for. Draw a grid of cards and ask “put them in a row”, and Flexbox can do it. Ask that the rows stay aligned when one card grows, and you need Grid.
One axis against two
| Need | Model | Why |
|---|---|---|
| Row of buttons, navbar, chips | Flexbox | Distribution along one axis |
| Card grid with aligned rows | Grid | Two axes at once |
| Dashboard with named areas | Grid | Explicit areas |
| Text with an icon beside it | Flexbox | Simple vertical alignment |
| A layout that overlaps | Grid | Controlled overlap |
Auto Layout, translated
- Direction → `flex-direction` or `grid-auto-flow`.
- Hug contents → `width: fit-content`.
- Fill container → `flex: 1` or `width: 100%`.
- Fixed → `width` in `rem`, not in pixels when the text scales.
- Gap → `gap`, not margins between children.
- Wrap → `flex-wrap` or `repeat(auto-fit, minmax())`.
The three commonest breakages
Fixed heights
A fixed height on a card looks tidy in the mockup and cuts the text when the language changes or the reader enlarges the type. Use min-height and let the content grow.
Percentage gap
A percentage gap is calculated from the width of the container, not from the space between items. With three columns it produces a number that does not match the drawing. Use rem.
Grid with rigid columns
grid-template-columns: 1fr 1fr 1fr gives three unreadable columns on a phone. Use repeat(auto-fit, minmax(240px, 1fr)) and add a breakpoint only when the content demands one.
.cards {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}How to check without guessing
- Try 320, 768 and 1280px: three contexts, not three tastes.
- Set the text to 200%: the layout must stay readable.
- Put a long string in every card: nothing may be cut.
- Check the tab order: the visual layout must not lie.
The EneUI catalogue holds 1,556 blocks (31 October 2026) already composed. Seeing how they solve the grid teaches more than another theoretical guide.
Frequently asked questions
Can Grid replace Flexbox?
Often yes, but Flexbox is simpler for a single row of items. Using Grid for everything adds complexity and buys nothing.
Is Auto Layout Flexbox?
No. It is a constraint model. Whether you translate it to flex or grid depends on what must happen when the content changes.
Is gap better than margins?
gap for the space between items in the same group. Margins still work for the space outside the container.
How do I handle cards of different heights?
Use Grid with aligned rows, or align-items: stretch. If the cards must keep different heights, use Flexbox with align-items: flex-start.
How many columns at most?
It depends on the content width. Past 4 columns on desktop the text gets hard to read: measure, do not copy.