CSS Flexbox vs. CSS Grid: When to Use Which? (With Clear Examples)

If you've spent more than a week writing CSS, you've probably asked yourself this question at 11 PM while staring at a layout that refuses to cooperate: "Should this be Flexbox or Grid?"

You're not alone. This is one of the most searched CSS questions for a reason, both tools can technically build the same layout in many cases, which makes the decision feel arbitrary. It isn't. Once you understand what each one was actually designed to solve, the choice becomes almost automatic.

This guide skips the abstract theory and gets straight to the point: what each tool is good at, where people get it wrong, and exactly which one to reach for in real-world situations , navbars, cards, dashboards, forms, the works.

The One-Sentence Difference

Here's the rule that will save you the most time:

Flexbox is one-dimensional. CSS Grid is two-dimensional.

Flexbox arranges items along a single line, either a row or a column. It doesn't naturally know about "rows and columns" as a structured system; it just keeps placing items along one axis and wraps them if needed.

CSS Grid, on the other hand, was built specifically to control rows and columns at the same time. It thinks in terms of a grid, like a spreadsheet, where every item can be placed precisely by row and column position.

That single distinction answers 80% of "Flexbox or Grid?" questions before you even open your code editor.

A Quick Mental Model

Think of it like this:

• Flexbox = arranging books on a single shelf. You can adjust spacing, alignment, and order, but it's still just one shelf.
• CSS Grid = arranging books in a full bookcase with multiple shelves and columns. You can say "this book goes on shelf 2, column 3" and it stays there.

If your layout problem is "arrange these things in a line, and let them grow/shrink nicely," that's a shelf problem, Flexbox.

If your layout problem is "arrange these things in a structured grid with both rows and columns," that's a bookcase problem, Grid.

Flexbox: The Basics That Actually Matter

Flexbox has a lot of properties, but in practice, you'll use a small core set 90% of the time.

.container {
  display: flex;
  justify-content: space-between; /* spacing along the main axis */
  align-items: center;             /* alignment along the cross axis */
  gap: 16px;                       /* spacing between items */
}

The two properties that confuse beginners most are justify-content and align-items. Here's the trick: they always refer to the main axis and cross axis, not literally "horizontal" and "vertical."

• By default, flex-direction: row means the main axis is horizontal, so justify-content controls horizontal spacing and align-items controls vertical alignment.
• Switch to flex-direction: column, and the axes flip, justify-content now controls vertical spacing, and align-items controls horizontal alignment.

Once that clicks, Flexbox stops feeling random.

Real Example: A Navbar

This is the textbook Flexbox use case, a logo on the left, navigation links in the middle, and a button on the right, all in a single row.

<nav class="navbar">
  <div class="logo">NordDev</div>
  <ul class="nav-links">
    <li>Home</li>
    <li>Services</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
  <button class="cta">Get Started</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

Notice we used Flexbox twice, once for the overall navbar layout, and once for the list of links. That's normal. Flexbox is great for nesting small one-dimensional arrangements inside each other.

Why not Grid here? Because there's no real "row and column" structure to control. It's just three items in a line that need to be spaced apart and vertically centered. Grid could do this, but it would mean defining columns you don't actually need to track, extra complexity with zero benefit.

CSS Grid: The Basics That Actually Matter

Grid's superpower is the ability to define an explicit structure up front, then place items into it.

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

The fr unit ("fraction") is the single most useful thing in Grid. 1fr 1fr 1fr means "divide the available space into three equal parts." 2fr 1fr means "the first column gets twice the space of the second." No calculating percentages, no fighting with flex-basis hacks.

Real Example: A Dashboard Layout

This is where Grid earns its keep, a layout with a sidebar, header, main content, and footer, all needing to align both horizontally and vertically.

<div class="dashboard">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 70px 1fr 60px;
  grid-template-areas:
    "sidebar header"
    "sidebar content"
    "sidebar footer";
  height: 100vh;
  gap: 12px;
}

.header   { grid-area: header; }
.sidebar  { grid-area: sidebar; }
.content  { grid-area: content; }
.footer   { grid-area: footer; }

Look at how readable grid-template-areas is, it visually maps to the layout itself. You can glance at the CSS and immediately picture the page. Try building this exact structure with Flexbox and you'll end up nesting three or four flex containers inside each other, with extra wrapper divs just to fake rows and columns. It's possible, but it's the wrong tool for the job.

Side-by-Side: The Same Layout, Two Ways

To make the difference concrete, here's a simple 3-card layout built both ways.

Using Flexbox

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 250px; /* grow, shrink, base width */
}

This works fine, but notice the behavior: as the container resizes, cards wrap based on available space, and there's no guarantee about how many end up per row or whether rows align with each other. Flexbox doesn't "know" about rows, each wrapped line is independent.

Using Grid

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

Same visual result in many cases, but Grid is explicitly aware of the column structure. Every card in a row aligns with every other row automatically, column widths stay consistent, and you get that "true grid" look for free. This single line of Grid code is also doing the job of a media-query-heavy Flexbox setup.

Verdict for card grids: Grid wins almost every time. The auto-fit + minmax() combo is one of the most powerful, slept-on patterns in modern CSS.

Decision Cheat Sheet

Bookmark this section. When in doubt, run through it:

Situation	Use	Why
Navbar, toolbar, button group	Flexbox	Single row of items needing spacing/alignment
Page layout (header/sidebar/footer)	Grid	Multiple regions needing 2D structure
Card grid / image gallery	Grid	Consistent rows and columns that align
Centering a single element	Either	Both handle this equally well
Form with labels and inputs	Grid	Aligning labels and inputs across rows
Sidebar that auto-sizes to content	Flexbox	Content-driven sizing along one axis
Sticky footer pinned to bottom	Flexbox or Grid	Both can do this with min-height: 100vh
Overlapping elements	Grid	Grid allows items to share the same cell
Responsive component that reflows	Flexbox	flex-wrap handles this naturally
Dashboard with widgets of varying sizes	Grid	Precise placement via grid-area or line numbers

A Pattern Most Tutorials Skip: Using Both Together

Here's something that rarely gets explained clearly: Flexbox and Grid are not rivals you pick once per project. You use Grid for the page-level skeleton, and Flexbox for the smaller components living inside it. This is how real production codebases actually look.

.page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
}

The outer .page uses Grid to define the two-column skeleton. Each .card inside uses Flexbox to stack its own content (title, text, button) and push the button to the bottom with space-between. Neither tool is doing the other's job, they're each handling what they're best at.

Common Mistakes (And How to Avoid Them)

Mistake 1: Using Flexbox for a Full Page Layout

You'll see this in older codebases, header, sidebar, content, and footer all wrapped in nested flex containers with manual width percentages. It works until someone adds a new section, and suddenly three nested divs need their flex-basis recalculated. If you're laying out the whole page skeleton, default to Grid first and only reach for Flexbox if the structure genuinely has no rows/columns to track.

Mistake 2: Using Grid for Simple One-Row Components

The opposite problem also happens. Developers who've just learned Grid sometimes use it for everything, including a simple icon-plus-text button. This isn't "wrong," but it adds unnecessary grid-template definitions for something Flexbox solves in one line. Simpler tool, simpler code, easier to read later.

Mistake 3: Forgetting min-width: 0 on Flex Children

This one causes real bugs. By default, flex items refuse to shrink below their content's natural width, which causes text or content to overflow the container instead of wrapping.

.flex-item {
  min-width: 0; /* allows the item to shrink properly */
}

If you've ever seen a flex child mysteriously overflow its parent despite overflow: hidden, this is almost always the fix.

Mistake 4: Not Using gap

Both Flexbox and Grid support gap directly, there's no need for margin hacks or :not(:last-child) selectors anymore. If you're still writing margin-right: 16px and then overriding it on the last item, you're solving a problem that's been fixed for years.

Mistake 5: Assuming Grid Items Must Fill Every Cell

Grid doesn't require every cell to be occupied. You can deliberately leave gaps, span items across multiple cells with grid-column: span 2, or even let items overlap. This flexibility (no pun intended) is part of why Grid handles complex, asymmetric layouts that Flexbox simply can't.

Performance and Browser Support: Does It Matter Today?

Short answer: not really, and that's good news. Both Flexbox and CSS Grid have full support across all modern browsers, Chrome, Firefox, Safari, and Edge have supported both for years at this point. There's no meaningful performance gap between the two for typical use cases; the browser's layout engine handles either efficiently.

The only time this becomes a real consideration is if you need to support genuinely ancient browsers (think Internet Explorer 11), where Grid support was partial and required vendor prefixes. For virtually every project built today, this isn't a practical concern.

Quick Reference: Key Properties

Flexbox Essentials

display: flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
flex-wrap: nowrap | wrap;
gap: 16px;
flex: grow shrink basis; /* e.g. flex: 1 1 200px; */

Grid Essentials

display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "a a" "b c";
gap: 20px;
grid-column: span 2;
grid-row: 1 / 3;
place-items: center; /* shorthand for align-items + justify-items */

The Bottom Line

Stop thinking of this as a competition. Flexbox and Grid solve different shaped problems:

• Ask yourself: "Do I need to control rows and columns together?" If yes, reach for Grid.
• Ask yourself: "Am I just arranging items in a single line that might wrap?" If yes, reach for Flexbox.
• And remember: most real layouts use both, Grid for the skeleton, Flexbox for the muscles and details inside each section.

Once you internalize that one distinction, you'll stop guessing and start building layouts with intention, which, honestly, is the difference between fighting CSS and actually enjoying it.