CSS Grid vs. Flexbox: When to Use Which for Modern Layouts

High-level comparison

At a glance:

• Flexbox: One-dimensional layout (row or column). Great for aligning items along a single axis.
• CSS Grid: Two-dimensional layout (rows and columns). Great for full-page or section layouts.
• Flexbox excels at: Navigation bars, button groups, card rows, alignment and distribution of items.
• Grid excels at: Page templates, dashboards, galleries, complex responsive arrangements.

CSS Grid in action: two-dimensional layouts

Example 1: Responsive gallery with CSS Grid

Resize the window to see how the grid adapts from 4 columns to 2 columns on smaller screens.

Code for the gallery:

<div class="grid-gallery">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</div>

/* CSS */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.grid-gallery div {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 8px;
  height: 70px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 800px) {
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

Example 2: Page layout with header, sidebar, content, and footer

This is where Grid shines: defining named areas and letting the browser place them.

Code for the layout:

<div class="grid-layout">
  <header class="grid-header">Header</header>
  <aside class="grid-sidebar">Sidebar</aside>
  <main class="grid-main">Main content</main>
  <footer class="grid-footer">Footer</footer>
</div>

/* CSS */
.grid-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 0.75rem;
}

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

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

When to prefer CSS Grid

• Complex layouts: Dashboards, multi-column pages, magazine-style layouts.
• Both axes matter: You care about rows and columns at the same time.
• Named areas: You want to describe the layout in a semantic, template-like way.
• Reordering by template: You want to rearrange entire sections at breakpoints.

Flexbox in action: one-dimensional layouts

Example 3: Responsive navigation bar with Flexbox

On narrow screens, the nav collapses into a vertical stack thanks to a media query.

Code for the navigation:

<nav class="flex-nav">
  <div class="flex-nav-logo">MySite</div>
  <div class="flex-nav-links">
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </div>
</nav>

/* CSS */
.flex-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-nav-links {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .flex-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

Example 4: Flexible card row with wrapping

Flexbox makes it easy to create rows of cards that wrap naturally as space changes.

Code for the card row:

<div class="flex-cards">
  <article class="flex-card">...</article>
  <article class="flex-card">...</article>
  <article class="flex-card">...</article>
</div>

/* CSS */
.flex-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.flex-card {
  flex: 1 1 180px; /* grow, shrink, basis */
  background: #fff;
  border-radius: 10px;
  padding: 0.75rem;
}

When to prefer Flexbox

• Single axis: You’re arranging items in a row or a column, not both.
• Alignment: You want to center, space-between, or stretch items easily.
• Content-driven: The layout should adapt to the size of its content.
• Small components: Navbars, toolbars, forms, buttons, badges, and card rows.

Using Grid and Flexbox together

In real projects, you rarely choose only Grid or only Flexbox. A common pattern is:

• Use Grid for the big picture: overall page or section layout.
• Use Flexbox inside Grid items: to align and distribute content within each block.

Example 5: Pricing section using Grid + Flexbox

Grid arranges the plans; Flexbox aligns actions inside each card.

Key idea: Grid defines the columns and spacing between plans, while Flexbox handles the internal alignment of buttons and text.

Best practices and decision guide

Quick decision checklist

• Do you need rows and columns at once? Use CSS Grid.
• Are you aligning items along a single line? Use Flexbox.
• Is this a full-page or section layout? Start with Grid.
• Is this a small component (nav, form, card row)? Start with Flexbox.
• Do you want named areas and template-like layout? Use Grid.
• Do you care about content-based sizing and alignment? Use Flexbox.

Practical tips

• Combine them: Don’t be afraid to nest Flexbox inside Grid or vice versa.
• Start simple: Use Flexbox for most components; reach for Grid when the layout feels “hacky”.
• Use gap: Prefer gap over margins for spacing in both Grid and Flexbox.
• Use minmax and auto-fit: In Grid, repeat(auto-fit, minmax(...)) is powerful for responsive layouts.
• Debug visually: Temporarily add borders or background colors to see how items are placed.

Next article: Speed up page loading with the Speculation Rules API