Flexbox vs CSS Grid: When to Use Which (with Real Examples)

This is the question I get from almost every junior developer I've mentored: 'Bhaiya, should I use Flexbox or Grid for this?' And honestly, I asked the same thing for way too long. On my first real client project I tried to build an entire dashboard layout with nested Flexboxes — three levels deep — and spent an evening chasing a bug where one card refused to stretch. The moment I rewrote the outer shell with CSS Grid, the whole thing fell into place in about ten minutes. That was the day the rule finally clicked for me, and it's the same rule I'll share with you below.

Short version: use both, often on the same page. The real skill is knowing which tool fits which job — and that's mostly pattern recognition you build up over a few dozen layouts. Let me shortcut that for you.

The one-line rule

Use Flexbox when your layout is essentially a single row or column of items. Use Grid when you need to align items in two dimensions at the same time. That's the entire heuristic — everything else is detail.

When Flexbox shines

• Navigation bars with a logo on one side and links on the other
• Card footers that push a button to the bottom
• Pill groups, button toolbars, and tag lists
• Centering literally anything (display: flex; place-items: center)
• Any layout where item sizes are content-driven and order can shift

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

When CSS Grid is the right call

• Page-level layouts (header / sidebar / main / footer)
• Image galleries and masonry-style grids
• Dashboard widgets with explicit columns and rows
• Magazine layouts with overlapping or spanning items
• Any layout where you want to declare the shape first, then drop children in

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Using both together

The most maintainable real-world layouts use Grid for the page skeleton and Flexbox inside each grid cell. Grid handles the big picture; Flexbox handles the row of buttons inside a card. Trying to do everything with one or the other usually results in fragile CSS.

Performance and browser support

Both layouts are fully supported in every modern browser (including all evergreen mobile browsers since 2018). Performance is essentially identical for typical pages. Choose based on intent, not on performance fears.

Cheat sheet

1. One axis? Flexbox.
2. Two axes? Grid.
3. Need to align items relative to each other? Flexbox.
4. Need to align items relative to a container? Grid.
5. Page-level layout? Grid.
6. Component-level layout? Usually Flexbox.

How I actually use both in a real project

On the last Laravel + Bootstrap admin panel I built, the page shell — sidebar, top bar, main content, footer — was a single CSS Grid with named areas. Inside the main content, every card, table toolbar, and pagination row was Flexbox. Zero fights, zero magic numbers. That's the pattern I keep coming back to: Grid for the skeleton, Flexbox for the muscles. Try that split on your next project and I promise you'll stop Googling 'flexbox vs grid' by the end of the week.