CSS Flexbox vs Grid: When to Use Each Layout

Choosing between Flexbox and Grid isn't about which is "better"—it's about matching your layout constraints to the right tool. Most developers default to Flexbox out of familiarity and end up fighting its single-axis model to build things Grid handles natively in three lines. This guide gives you a concrete decision framework, real performance context, and hybrid patterns that make both tools work together instead of against each other.

Flexbox vs Grid Fundamentals—Understanding Core Differences

CSS code displayed on a computer screen highlighting programming concepts and technology. — Photo by Bibek ghosh on Pexels

One-Dimensional vs Two-Dimensional Layout Models

Flexbox operates along a single axis at a time—either a row or a column. Items in a flex container flow along that axis and can wrap to new lines, but each line is independent. The container has no concept of aligning rows with each other.

Grid operates on both axes simultaneously. You define rows and columns in one declaration, and the browser places items into that two-dimensional template. Cells align across both dimensions by default.

Here's the same three-item layout built both ways:

<!-- Flex container -->
<div class="flex-container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

<!-- Grid container -->
<div class="grid-container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

/* Flexbox: single axis, items adapt to content size */
.flex-container {
  display: flex;
  gap: 1rem;
}

/* Grid: two axes defined upfront, items fill template slots */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

For performance: Flexbox calculates layout iteratively along one axis. Grid resolves its entire two-dimensional constraint set in one pass. For single-axis layouts, Flexbox is lighter. For 2D layouts, Grid's upfront calculation avoids the cascading reflow that Flexbox causes when you try to simulate rows.

Content-Flow vs Template-Driven Architecture

Flexbox is content-out: items dictate their own sizing and wrapping behavior. You give hints (flex-basis, flex-grow, flex-shrink), and the browser negotiates space based on content. Think of it like stocking a dynamic shelf—items take up what they need and push neighbors accordingly.

Grid is template-in: you define the structure first, then items fill it. Think of it like a filing cabinet with fixed drawer sizes. Content goes into predefined slots whether or not it fills them.

/* Flexbox: content drives wrapping */
.flex-wrap-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.flex-wrap-demo .item {
  flex: 1 1 200px; /* grows, shrinks, prefers 200px */
}

/* Grid: template drives placement */
.grid-auto-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 1rem;
}

The Flexbox version wraps items when they can't fit—each row's height is determined independently by that row's tallest item. The Grid version enforces consistent row heights across all rows because the browser resolved rows and columns together. That distinction matters the moment you need items in adjacent rows to align vertically.

The Decision Tree—When to Use Flexbox vs Grid

Flexbox Use Cases and Performance Profile

Flexbox wins for linear sequences: navigation bars, toolbars, button groups, card internals, and any list that needs to wrap responsively without alignment requirements between rows.

/* WRONG: trying to simulate a grid with Flexbox */
.product-grid {
  display: flex;
  flex-wrap: wrap;
}
.product-grid .card {
  width: calc(33.333% - 1rem); /* fragile, magic numbers */
  margin: 0.5rem;
}
/* Problem: row heights are independent—cards in adjacent rows don't align */

/* RIGHT: Flexbox for a navbar—it's actually one-dimensional */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
}

.nav-links {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  flex-wrap: wrap; /* collapses gracefully on small screens */
}

/* Responsive: let flex-wrap handle it instead of media queries */
.nav-links li {
  flex: 0 1 auto;
}

Flexbox layout calculations are cheaper for single-axis scenarios because the browser only resolves one dimension. The tradeoff appears when you use flex-wrap with varying content heights—each wrapped row triggers independent height calculations, which cascades into repaints for dynamic content.

Grid Use Cases and Performance Profile

Grid wins for page-level templates and any layout where you need items in separate rows to align with each other. Product grids, dashboards, galleries, page chrome (header/sidebar/main/footer)—anything 2D.

/* WRONG: Grid for a simple horizontal button row */
.button-group {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem;
}
/* Unnecessary overhead. Flexbox does this in fewer constraint calculations. */

/* RIGHT: Grid for page layout */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  gap: 0;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Grid pre-calculates the full layout in one pass. When content inside a grid item changes height, only that cell reflows—not the entire layout track. With a Flexbox-based 2D simulation, a single item height change can trigger recalculation across the entire container. For product grids with dynamic content loading, this difference is measurable in DevTools.

The Constraint-Based Decision Matrix

Run through this in order when you're staring at a design and can't decide:

/*
  LAYOUT DECISION TREE
  ─────────────────────────────────────────────
  1. Do you need alignment control across BOTH rows AND columns?
     → YES: Use Grid
     → NO:  Continue to step 2

  2. Will content wrap to multiple lines with unpredictable heights?
     → YES: Use Flexbox (content-driven wrapping)
     → NO:  Continue to step 3

  3. Is this a component's internal layout (button group, card, nav)?
     → YES: Use Flexbox
     → NO:  Continue to step 4

  4. Do items need to span multiple rows or columns?
     → YES: Use Grid
     → NO:  Either works; default to Flexbox for simplicity

  REAL-WORLD APPLICATIONS:
  - E-commerce product grid (aligned cards, consistent rows) → Grid
  - Product card internals (image + title + price + CTA)    → Flexbox
  - Dashboard with widget areas                             → Grid
  - Widget's header bar with title and actions              → Flexbox
  - Navigation bar                                          → Flexbox
  - Image gallery with captions                             → Grid + Subgrid
*/

The e-commerce case is the most common source of wrong decisions. A product list looks like it could be Flexbox with flex-wrap, but the moment you need card footers (the "Add to Cart" button) aligned across cards of different content heights, you need Grid. Flexbox can't align items across independent rows. Grid can, and it takes two lines.

Hybrid Layouts—Using Flexbox and Grid Together

Grid as Macro Structure, Flexbox for Components

The real power of modern CSS layout is combining both: Grid defines the page skeleton, Flexbox handles the internals of each piece. They don't conflict—they operate at different levels of the DOM hierarchy.

<div class="page-layout">
  <header class="page-header">
    <!-- Flexbox handles the navbar internals -->
    <nav class="navbar">
      <a href="/" class="logo">Brand</a>
      <ul class="nav-links">
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
      </ul>
      <button class="cta">Sign Up</button>
    </nav>
  </header>

  <main class="page-main">
    <!-- Grid handles the product listing -->
    <div class="product-grid">
      <article class="product-card">
        <img src="product.jpg" alt="Product">
        <div class="card-body">
          <!-- Flexbox handles card internals -->
          <h2>Product Name</h2>
          <p>Short description of the product.</p>
          <div class="card-footer">
            <span class="price">$49.99</span>
            <button>Add to Cart</button>
          </div>
        </div>
      </article>
    </div>
  </main>
</div>

/* MACRO: Grid owns the page structure */
.page-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.page-header { grid-area: header; }
.page-main   { grid-area: main; }

/* MACRO: Grid owns the product listing */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr; /* equal height rows */
  gap: 1.5rem;
  padding: 1.5rem;
}

/* MICRO: Flexbox owns the navbar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* MICRO: Flexbox owns the card internals */
.product-card {
  display: flex;
  flex-direction: column;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1; /* stretch to fill grid cell height */
  padding: 1rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* push footer to card bottom */
}

Notice margin-top: auto on .card-footer. That's Flexbox pushing the footer down so all "Add to Cart" buttons align to the same visual baseline—without Grid needing to know anything about card content. Grid ensures equal row heights; Flexbox handles internal distribution. Neither clobbers the other.

Subgrid vs Nesting—When to Use Each Approach

CSS Subgrid (now baseline-supported: Chrome 117+, Firefox 71+, Safari 16+) lets grandchild elements participate in the parent grid's track sizing. Before Subgrid, you'd fake this with nested Flexbox and magic numbers. You don't need to anymore.

/* OLD WAY: nested Flexbox hack to align card internals */
.product-card {
  display: flex;
  flex-direction: column;
}
/* Fragile—you're guessing heights, not inheriting the grid */
.card-image { height: 200px; } /* magic number */
.card-title { min-height: 3rem; } /* another magic number */

/* NEW WAY: Subgrid for aligned card internals */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* Define rows that cards will inherit */
  grid-template-rows: auto;
}

.product-card {
  display: grid;
  /* Inherit the parent grid's column tracks */
  grid-row: span 4; /* image, title, description, footer */
  grid-template-rows: subgrid;
}

/* Now each zone aligns across ALL cards automatically */
.card-image       { /* row 1 */ }
.card-title       { /* row 2 */ }
.card-description { /* row 3 */ }
.card-footer      { /* row 4 */ }

Subgrid eliminates the DOM depth you'd add with nested wrappers and removes all the magic-number heights. Browser support as of 2026 is solid for modern targets. See the MDN Subgrid documentation for the full spec details.

Use nested Flexbox when you don't need cross-sibling alignment—button internals, nav items, form rows. Use Subgrid when you need items inside different grid cells to align with each other across the parent track.

Progressive Enhancement and Fallback Strategies

If your user base still includes older browsers (embedded systems, enterprise intranets, regions with lower device turnover), use @supports to layer Grid on top of a Flexbox baseline.

/* Baseline: Flexbox layout that works everywhere */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.product-card {
  flex: 1 1 240px;
  max-width: 400px;
}

/* Enhancement: Grid for browsers that support it */
@supports (display: grid) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
  }

  .product-card {
    max-width: none; /* grid handles sizing now */
  }
}

/* Subgrid layer: only where supported */
@supports (grid-template-rows: subgrid) {
  .product-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

Test your fallback without old browsers by temporarily removing the @supports block and inspecting in DevTools. Don't rely on browser flags—just toggle the CSS. This approach lets you write modern Grid layouts without cutting off anyone still on a legacy browser, and it documents your progressive enhancement intent directly in the stylesheet. For more context on layout methods, see our CSS Layout Fundamentals primer.

Common Mistakes, Accessibility, and Migration Patterns

Anti-Patterns and Performance Pitfalls to Avoid

These are the mistakes that appear in production code every week. Most of them come from reaching for the familiar tool instead of the right one.

/* MISTAKE 1: Simulating a 2D grid with Flexbox */
/* WRONG */
.gallery {
  display: flex;
  flex-wrap: wrap;
}
.gallery-item {
  width: calc(33.333% - 16px);
  margin: 8px;
}
/* Why it's wrong: each flex row is independent—
   item heights don't align across rows. Image captions
   at different lengths will destroy the visual grid. */

/* RIGHT */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Grid resolves both axes. Done. */

/* MISTAKE 2: Overspecifying Grid placement */
/* WRONG */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.widget-1 { grid-column: 1; grid-row: 1; }
.widget-2 { grid-column: 2; grid-row: 1; }
.widget-3 { grid-column: 3; grid-row: 1; }
.widget-4 { grid-column: 1; grid-row: 2; }
/* This defeats Grid's auto-placement algorithm.
   Adding a new widget means manually renumbering. */

/* RIGHT */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Let auto-placement handle the rest */
}
/* Only specify placement when you need spans or exceptions */
.widget-featured {
  grid-column: span 2; /* this one spans—specify only this */
}

/* MISTAKE 3: Mixing flex and grid context on the same element */
/* WRONG */
.container {
  display: flex;
  display: grid; /* second declaration wins, first is wasted */
  grid-template-columns: repeat(3, 1fr);
}
/* This looks obvious written out, but it appears in
   real code when devs prototype with Flexbox first,
   then switch to Grid without cleaning up. */

/* Also wrong: applying both to achieve something one should do alone */
.nav {
  display: grid; /* why? */
  grid-template-columns: auto 1fr auto;
}
/* Use Flexbox for navbars. Grid adds nothing here. */

Run your layout-heavy pages through Chrome DevTools Performance panel. In the Rendering section, enable "Layout Shift Regions." A 2D layout built with Flexbox will show far more shift regions than the same layout built with Grid when content loads dynamically.

Accessibility Implications of Layout Choice

This is the section most comparison posts skip. Both Flexbox and Grid can create a disconnect between visual order and DOM order—which directly harms keyboard navigation and screen reader users.

/* DANGER: flex order changes visual order without changing DOM order */
.nav-links {
  display: flex;
}
.nav-links .cta-button {
  order: -1; /* visually first, but DOM-last → tab order mismatch */
}
/* Screen reader reads it last. Keyboard tab hits it last.
   But it looks first. That's an accessibility violation. */

/* DANGER: Grid placement disconnects visual from semantic order */
.page-layout {
  display: grid;
  grid-template-areas:
    "sidebar main"; /* sidebar is visually left */
}
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }

/* If in your HTML, main comes before sidebar in the DOM,
   keyboard users will tab through main first,
   then jump visually backward to sidebar. Confusing. */

<!-- RIGHT: Match DOM order to visual order -->
<!-- If sidebar appears first visually, put it first in the DOM -->
<div class="page-layout">
  <nav class="page-sidebar" aria-label="Section navigation">
    <!-- nav content -->
  </nav>
  <main class="page-main">
    <!-- main content -->
  </main>
</div>

/* RIGHT: If you must reorder visually, use landmark roles
   and aria-flowto to communicate the intended reading order */

/* Acceptable exception: purely visual decorative reordering
   where the logical reading order matches DOM order
   and the visual change is non-semantic (background card flip) */
.card-deck .card:last-child {
  order: -1; /* ONLY acceptable if this is decorative */
}

The rule is simple: never use order, grid-column, or grid-row to place content in a position that a keyboard user would reach in a confusing sequence. If your visual design requires a different order than the DOM, the design needs to change—not just the CSS. Read the WCAG 2.2 Focus Order criterion for the compliance baseline.

Also see our post on accessible CSS layout patterns for more keyboard navigation testing techniques.

Scenario	Best Tool	Why
Navigation bar	Flexbox	Single axis, content-driven spacing
Page template (header/sidebar/main)	Grid	Two-dimensional, predefined areas
Product card grid	Grid	Needs row alignment across cards
Card internals (title/price/CTA)	Flexbox	Single axis, `margin-top: auto` pushes footer
Image gallery with captions	Grid + Subgrid	Cross-item caption alignment
Button group / toolbar	Flexbox	Lightweight, single row
Dashboard widget layout	Grid	Named areas, spanning, auto-placement
Responsive text + icon pair	Flexbox	Simple alignment, minimal overhead
Form layout (label/input columns)	Grid	Column alignment across rows
Wrapping tag list / chip group	Flexbox	Content-driven natural wrapping

Frequently Asked Questions

Q: Is CSS Grid always slower than Flexbox?

A: No—it depends on the task. For single-axis layouts, Flexbox has fewer constraint calculations and is marginally faster. For two-dimensional layouts, Grid is actually faster because it resolves the full layout in one pass, while Flexbox wrapping triggers row-by-row recalculation. Use DevTools Performance panel to measure your specific case rather than assuming.

Q: Can I use Subgrid today in production?

A: Yes, if your browser support target excludes IE11 and pre-2023 browsers. Chrome 117+, Firefox 71+, and Safari 16+ all support it. Wrap it in @supports (grid-template-rows: subgrid) and provide a standard Grid or Flexbox fallback for older environments. The fallback is usually just removing the subgrid value and accepting slightly imperfect alignment.

Q: Does using both Flexbox and Grid on the same page hurt performance?

A: Not in any meaningful way. Browsers handle both layout algorithms independently per element. The overhead comes from using the wrong algorithm for a given context (like Flexbox for 2D layouts), not from using both on the same page. A page with Grid for structure and Flexbox for components is the intended use pattern.

Wrap-up

Flexbox owns one-dimensional, content-driven layouts: navbars, button groups, card internals. Grid owns two-dimensional, template-driven layouts: page structure, product grids, dashboards. They're not competitors—most non-trivial UIs need both working at different levels of the DOM hierarchy. The performance edge cases only matter when you're using the wrong tool for the job. Start with the decision tree: if you need both axes aligned, reach for Grid first.

Search This Blog

Stack Decoded