CSS Flexbox vs Grid: When to Use Each (With Simple Examples)

Modern CSS has two powerful layout systems: Flexbox and CSS Grid. Beginners often ask which one to learn. The answer: both, because they solve different problems. Here's a practical guide to CSS Flexbox vs Grid.

The one-line difference

• Flexbox is one-dimensional: it arranges items in a row or a column.
• Grid is two-dimensional: it arranges items in rows and columns at the same time.

Flexbox examples

Navigation bar

.nav {
  display: flex;
  justify-content: space-between; /* logo left, menu right */
  align-items: center;
  gap: 16px;
}

Centre anything

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

Button group that wraps on mobile

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

Use Flexbox for: navbars, button groups, aligning items in a card, centring, small components.

Grid examples

Responsive card grid (no media queries)

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

Cards automatically form 1, 2, 3 or 4 columns depending on screen width.

Page layout with sidebar

.page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
}

Named areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
}
header { grid-area: header; }

Use Grid for: card grids, galleries, page layouts, dashboards, anything with rows and columns.

Use them together

A common pattern: Grid for the overall card layout, Flexbox inside each card to push the button to the bottom.

.card { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }

Quick decision table

Common mistakes

• Using Flexbox with fixed widths for card grids (uneven last rows); Grid handles this better
• Forgetting gap; it's cleaner than margins between items
• Not checking layouts at 360 px width on phones

For layout principles beyond code, see website grid and layout basics.

FAQs

Is CSS Grid supported on all browsers?

Yes, all modern browsers support Grid and Flexbox.

Should I use Bootstrap's grid instead?

Bootstrap's grid uses Flexbox under the hood. Native CSS Grid gives more control with less code. See Tailwind vs Bootstrap.

Joboo Web builds responsive layouts tested on real phones. See what we can build.