CSS Flexbox vs Grid: When to Use Which (Beginner's Guide)

Question

Introduction

Every beginner hits this wall eventually: "Do I use Flexbox or Grid here?"

I remember avoiding this question for months by just using Flexbox for everything — including things Grid was clearly built for. It worked, technically, but I was fighting the tool instead of using the right one.

Here's the short version before we go deep: Flexbox is for one direction (a row or a column). Grid is for two directions at once (rows AND columns together). Once that clicks, the decision gets easy.

Let's break it down properly.

What Flexbox Actually Does

Flexbox arranges items along a single axis — either horizontally or vertically.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

justify-content controls spacing along the main axis (usually horizontal), and align-items controls alignment on the cross axis (usually vertical).

Flexbox is perfect for:

• Navigation bars (logo left, links right)
• Buttons sitting side by side
• Centering a single element vertically and horizontally
• Card content where items need to stretch or wrap in one direction

What Grid Actually Does

Grid lets you define rows and columns at the same time, and place items precisely into that structure.

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

This creates 3 equal-width columns with 20px gaps — no media queries needed to get a basic responsive layout going.

Grid is perfect for:

• Full page layouts (header, sidebar, main content, footer)
• Image galleries
• Card grids (like a blog listing page)
• Anything where you're thinking in rows AND columns

The Real Test: Ask Yourself This

"Am I arranging things in one line, or am I building a layout?"

• One line → Flexbox
• Layout/grid of items → Grid

A Practical Example: Building a Card Grid

Here's a common beginner project — a responsive grid of cards, done the right way with Grid:

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="bg-slate-800 p-4 rounded-lg">Card 1</div>
  <div class="bg-slate-800 p-4 rounded-lg">Card 2</div>
  <div class="bg-slate-800 p-4 rounded-lg">Card 3</div>
</div>

(That's Tailwind CSS classes, but it maps directly to Grid under the hood — grid, grid-cols-3, gap-6.)

Now, inside each card, if you need to align an icon next to a title, or push a button to the bottom of the card — that's Flexbox's job:

<div class="bg-slate-800 p-4 rounded-lg flex flex-col justify-between">
  <div class="flex items-center gap-2">
    <span>🔥</span>
    <h3>Card Title</h3>
  </div>
  <button>Learn More</button>
</div>

This is the pattern you'll use constantly: Grid for the outer layout, Flexbox for the inner content.

Common Beginner Mistakes

1. Using Grid for a simple navbar. Overkill — Flexbox does this in 3
   lines.
2. Using Flexbox for a full page layout. You'll end up wrapping and
   fighting widths that Grid handles natively.
3. Not using gap. Both Flexbox and Grid support gap now — no more
   margin hacks between items.
4. Forgetting Grid can do more than equal columns.
   grid-template-columns: 200px 1fr gives you a fixed sidebar +
   flexible main content in one line.

Final Thoughts

You don't have to pick one and stick with it forever — most real websites use both together, Grid for structure and Flexbox for alignment inside components. Once you stop treating this as an either/or decision and start asking "one direction or two?", it stops being confusing.

Try rebuilding one of your old projects using this rule and see how much cleaner the CSS gets.

---

Muhammad Farhan is a Frontend Developer specializing in React.js and Tailwind CSS, based in Dera Ismail Khan, Pakistan.
Portfolio: Muhammad Farhan