# Flexbox or Grid? Choosing the Right Tool

Flexbox lines things up in one direction and lets the content set the sizes, grid lays out rows and columns you plan first, and positioning lifts one thing on top, so three questions tell you which fits each part of a page.

Journeyman · CSS · Updated November 1, 2026

## After this lesson you can

- Choose flexbox, grid or positioning for a part of a page, and explain the choice
- Combine grid and flexbox on one page, with grid for the page's layout and flexbox inside its parts

## Key takeaways

- Flexbox works in one direction, a row or a column. Grid works in two at once, rows and columns.
- Flexbox lets each item's content decide its size. Grid fits items into tracks you planned first.
- Real pages use both. Grid often draws the page and the galleries, and flexbox lines things up inside each part.
- Positioning is for things that sit on top of the layout, such as badges, sticky headers and tooltips, not for laying out a page.
- Ask three questions. One direction or two? Should content set the sizes, or a plan? Is it part of the layout or on top of it?

You now know three ways to lay things out: positioning, flexbox and grid. Flexbox can make a grid of cards with wrapping, and grid can make a row of links, so which one is right? On a real project the question comes up dozens of times a day, for a nav bar, a gallery, a form, a footer. People who've built many pages answer it in seconds, and not because they memorized a rule: they ask a few questions about the part in front of them. This lesson gives you those questions.

## One direction or two

Picture a bookshelf and an ice cube tray. Books on a shelf line up in one direction: left to right, and if the shelf is full, they move to the next shelf, each shelf on its own. Cubes in a tray line up in both directions at once: every cube is in a row *and* a column.

That's the first question:

- **Flexbox** lines things up in **one direction**, a row or a column. When items wrap onto a second line, each line is laid out on its own, so the items don't form columns.
- **Grid** lines things up in **two directions** at once. An item in row 2, column 3 sits exactly under the item in row 1, column 3.

```css
/* One direction: the links in the club's header, in a row */
.site-nav {
  display: flex;
  gap: 1.5rem;
}

/* Two directions: the photos, in rows and columns */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
```

If you find yourself wanting the items on the second line to line up with the ones above them, you want grid.

## Content decides, or the plan decides

The second question is who decides the sizes. Think of packing a car trunk: you start with the bags you have and fit the space around them. A parking garage is the opposite: the spaces are painted first, and every car fits into one.

- **Flexbox starts from the content.** Each item is as wide as its content asks for, then the leftover space is shared out. The nav links "Home", "Upcoming hikes" and "Join the club" end up different widths, which is right for them. Sizing a box by what's inside it is called **intrinsic sizing**.
- **Grid starts from the plan.** You draw the tracks first, `16rem 1fr` or `repeat(3, 1fr)`, and the items fit into them, whatever their content. Every photo in the gallery is the same width because the columns are.

In short: flexbox is content out, grid is layout in.

## Both on one page

You almost never choose one for a whole page. The Trail Photo Club page uses both, each where it fits:

```css
/* The page: grid draws header, sidebar, main and footer */
.page {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-areas: "header header" "sidebar main" "footer footer";
}

/* Inside the header: flexbox puts the logo left and the links right */
.page > header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
```

A grid item can be a flex container at the same time, and a flex item can be a grid. The header is a grid item of the page *and* a flex container for its logo and links. Each box picks its own layout for its own children.

**Try it.** Open a site you use often and inspect it. In the Elements panel, look for the `grid` and `flex` badges beside the tags. How many of each can you find on one page, and which parts use which?

## Where positioning still fits

Positioning, the `position` property you met in *Positioning: relative and absolute*, is the third tool. It isn't a way to lay out a page. It lifts one thing out of the layout and puts it on top:

- a "New hike" badge in the corner of a card: `position: absolute` inside a card with `position: relative`;
- a header that stays at the top while the page scrolls: `position: sticky`;
- a "Back to top" button that stays in the corner of the window: `position: fixed`;
- a tooltip that appears over the content: `position: absolute`, with `z-index` to keep it on top.

If the thing should push other things out of its way, it's part of the layout: use flexbox or grid. If it should sit on top without moving anything, use positioning.

## A checklist

When you're not sure, go through these in order:

| Ask | If yes | Example |
|---|---|---|
| Does it sit on top of other content, without moving it? | positioning | a badge, a tooltip, a sticky header |
| Do items need to line up in rows **and** columns? | grid | a gallery, a calendar, a dashboard |
| Is it the page's main layout, with named parts? | grid with `grid-template-areas` | header, sidebar, main, footer |
| Should parts of cards line up across a row? | grid with subgrid | product cards with buttons in a line |
| Is it a single row or column, with sizes set by the content? | flexbox | nav links, a toolbar, buttons, tags |
| Do you need to center one thing? | either: `display: grid; place-items: center;` or flexbox with `justify-content` and `align-items` | a "Loading" message in a box |

The last row is the honest answer to a common question: both work. `place-items: center` (read "place items center") centers every item of a grid in its cell, both ways at once; flexbox does the same with its two alignment properties. Pick the one your team already uses.

## Which fits?

Here are parts of the club's site. Decide for each before reading the answer:

1. **A row of filter buttons**, "All", "Mountains", "Lakes", "Forests", of different widths. *Flexbox: one row, sizes from the words.*
2. **A month calendar of hike dates**, seven days across. *Grid: rows and columns, each day under its weekday.*
3. **A "Members only" ribbon** across the corner of a photo. *Positioning: it sits on top of the photo.*
4. **A footer with three link lists side by side** that stack on a narrow screen. *Either works: grid with `repeat(auto-fit, minmax(12rem, 1fr))` if the lists should be equal columns, flexbox with wrapping if each list should be its own width.*
5. **A photo card**: a picture on top, then a title, then the trail's length and a heart icon pushed to the far right of one line. *Both, nested: the card's parts stack (a flex column or a grid), and the last line is a flex row with the heart pushed right.*

## Try it in Grid Town

[Grid Town, puzzle 27](https://www.ask-codey.com/games/grid-town/27): played right on the lesson page.

Grid outside, flex inside: give the town its two columns with grid, then line up the market stalls inside one lot with flexbox.

## Check yourself

2 questions to try on the lesson page.

## So what

Choosing a layout tool isn't about which one is better; it's about which question the part answers. Ask whether it's one direction or two, whether the content or the plan sets the size, and whether it's part of the layout or on top of it, and you'll pick the right tool the way experienced front-end developers do.

## Key terms

- [Flexbox](https://www.ask-codey.com/glossary/flexbox)
- [CSS Grid](https://www.ask-codey.com/glossary/css-grid)
- [Intrinsic sizing](https://www.ask-codey.com/glossary/intrinsic-sizing)
- [Positioning scheme](https://www.ask-codey.com/glossary/positioning-scheme)

## Cheat sheets

- [Flexbox or Grid? Choosing the Right Tool](https://www.ask-codey.com/cheat-sheets/css-flexbox-or-grid-cheat-sheet)

## Related

- [Flexbox: Lining Things Up in a Row or a Column](https://www.ask-codey.com/lessons/css-flexbox-basics)
- [CSS Grid: Rows and Columns](https://www.ask-codey.com/lessons/css-grid-basics)
- [Placing Items: Lines, Spans and Named Areas](https://www.ask-codey.com/lessons/css-grid-placement-and-areas)
- [Positioning: relative and absolute](https://www.ask-codey.com/lessons/css-position-relative-and-absolute)

Source: https://www.ask-codey.com/lessons/css-flexbox-or-grid