Flexbox vs Grid: Which Layout Tool to Use

Flexbox and grid are both layout systems, and you will often use them together. The quickest way to choose is to ask how many dimensions you are controlling.

Flexbox: one dimension

Flexbox arranges items along a single axis, a row or a column, and lets them grow, shrink and wrap. It is ideal for toolbars, button groups, and a row of cards where content decides the sizes.

.toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

Grid: two dimensions

Grid places items into rows and columns at the same time, so items can line up in both directions. Use it for page layouts, galleries and dashboards.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

The axis mix-up

In flexbox, justify-content works along the main axis and align-items along the cross axis. When you change flex-direction to column, the axes swap. That is why a centring rule that worked in a row seems to do the wrong thing in a column.

Prefer gap to margins

The gap property adds space only between items, so you do not need to special-case the first or last child. It works in both flexbox and grid.

Mobile-first responsiveness

Write the small-screen layout as your default and add @media (min-width: ...) rules for wider screens. Grid combined with repeat(auto-fit, minmax(220px, 1fr)) can even adapt the number of columns without media queries.

Key takeaways

• One direction: flexbox. Rows and columns together: grid.
• Remember that axes swap with flex-direction.
• Use gap for spacing between items.
• Start mobile-first and enhance upward.