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

The Short Answer

Use Flexbox for one-dimensional layouts (a row or a column). Use CSS Grid for two-dimensional layouts (rows and columns simultaneously). Both are powerful, and they often work best when used together.

Understanding Flexbox

Flexbox (Flexible Box Layout) is designed to distribute space along a single axis. It excels at:

• Centering elements vertically and horizontally
• Building navigation bars
• Aligning items in a card's content area
• Distributing space between buttons in a toolbar

Flexbox Example: Centering a Card

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

This three-line trick — combined with min-height: 100vh — is one of the cleanest ways to center content on a page.

Flexbox Example: Responsive Navbar

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

Understanding CSS Grid

Grid is a two-dimensional system, giving you control over both rows and columns at the same time. It's perfect for:

• Full page layouts
• Card grids / image galleries
• Dashboard interfaces
• Magazine-style layouts

Grid Example: Responsive Card Layout

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

This single snippet creates a responsive grid that automatically adjusts the number of columns based on available space — no media queries required.

Grid Example: Classic Page Layout

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

Side-by-Side Comparison

Feature	Flexbox	CSS Grid
Dimensions	One-dimensional	Two-dimensional
Direction	Row or Column	Both simultaneously
Best For	Component alignment	Page/section layouts
Content-driven?	Yes	No (layout-driven)
Browser Support	Excellent	Excellent
Gap support	Yes (modern)	Yes

Using Both Together

The most powerful approach is combining them. Use Grid for your overall page layout and Flexbox for components within those grid areas.

/* Grid handles the page */
.layout { display: grid; grid-template-columns: 1fr 3fr; }

/* Flexbox handles the card internals */
.card { display: flex; flex-direction: column; justify-content: space-between; }

Key Takeaway

Don't think of Flexbox and Grid as competitors — think of them as complementary tools. Grid builds the stage; Flexbox arranges the actors on it. Once you internalize when each shines, your layouts will become faster to write, easier to maintain, and more robust across screen sizes.