Flexbox vs CSS Grid: When to Use Which

The short answer

Flexbox is one-dimensional layout: items line up along a single axis, either a row or a column. Their size comes from their content, and the container distributes the free space.

CSS Grid is two-dimensional layout: you define rows and columns, and items are placed into the cells of that grid. Structure comes first, content goes into it.

A practical rule: if alignment along one line matters, use Flexbox; if items must line up both horizontally and vertically, use Grid.

The key difference: content-first vs layout-first

• In Flexbox, an item's size grows out of its content. Three buttons with different labels get different widths, and that is fine.
• In Grid, the container decides sizes. Product cards in a catalog get equal widths even when their text differs.

So before writing CSS, ask one question: what leads here, the content or the grid?

Comparison

When to choose Flexbox

• Navigation and toolbars: logo on the left, menu on the right.
• Button groups, tags, icon plus label.
• Centering a single element.
• A row where one item stretches while the others take only what they need.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbar .search {
  flex: 1; /* takes all remaining space */
}

When to choose CSS Grid

• Page shell: header, sidebar, content, footer.
• Catalogs and galleries where cards must sit in even rows.
• Forms with aligned labels and fields.
• Overlapping text and an image without position: absolute.

A responsive card grid without media queries:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

The best option: both together

The cleanest layouts usually use both tools at different levels:

1. Grid builds the skeleton: the page, sections, the card grid.
2. Flexbox arranges content inside a cell: title, price and button inside a card.

.card {
  display: flex;
  flex-direction: column;
}
.card .button {
  margin-top: auto; /* button sticks to the bottom in every card */
}

Another useful technique is subgrid: a nested grid inherits the parent's tracks, so titles in neighboring cards align to the same height. Modern browsers support it, but check support for your audience.

Common mistakes

• Building a grid with Flexbox using calc() widths and negative margins, when Grid does it in one line.
• Using Grid for a simple row of buttons, which adds needless complexity.
• Spacing with margins instead of gap, which works in both tools.
• Changing visual order with order or Grid placement without changing the HTML. This breaks the order for keyboard and screen reader users.

Deciding in a minute

1. Items in one line, sized by their content? Use Flexbox.
2. Need even rows and columns at once? Use Grid.
3. Have an outer structure and inner content? Grid outside, Flexbox inside.