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

I remember the days of float-based layouts. Clearfix hacks. Having to set overflow: hidden on a container just to make it not collapse. Those were dark times, and I don't miss them.

CSS Grid and Flexbox changed everything. But I still see developers reaching for Grid when Flexbox would be simpler, and vice versa. The confusion is understandable — they overlap in some areas. So let me give you a clear mental model for when each one shines.

The One-Sentence Version

Flexbox = you're laying things out in one direction (a row OR a column). Grid = you're laying things out in two directions at once (rows AND columns).

That's it, mostly. Everything else is detail.

Understanding Flexbox

Flexbox is a one-dimensional layout system. You pick an axis (horizontal or vertical) and arrange items along it. It's ideal for navigation bars, button groups, card rows, and anywhere you're distributing or aligning items in a line.

Basic Flexbox Example

/* A simple horizontal navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

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

<nav class="navbar">
  <div class="logo">AiTechWorlds</div>
  <ul class="nav-links">
    <li><a href="/">Home</a></li>
    <li><a href="/posts">Blog</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

justify-content controls alignment along the main axis. align-items controls alignment on the cross axis. Once you understand those two properties plus flex-wrap, you can handle most flex scenarios.

Flexbox for Card Alignment

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 280px; /* grow, shrink, min-width */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
}

The flex: 1 1 280px shorthand is one of the most useful patterns in Flexbox. It says: "each card can grow to fill space, shrink if needed, and never go below 280px wide." This creates a responsive grid-like effect with zero media queries.

For a deeper dive on Flexbox alignment properties, check the CSS Flexbox and Grid notes.

Understanding CSS Grid

Grid is a two-dimensional layout system. You define rows AND columns simultaneously, then place items precisely — or let the browser auto-place them. It's the right tool for page layouts, dashboard structures, image galleries, and any design where items need to line up both horizontally and vertically.

Basic Grid Example

/* A typical blog layout */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 24px;
  min-height: 100vh;
}

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

<div class="page-layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main Content</main>
  <aside class="aside">Aside</aside>
  <footer class="footer">Footer</footer>
</div>

The named template areas make Grid layouts almost self-documenting. You look at the grid-template-areas value and you see exactly how the page is structured visually.

Responsive Grid Without Media Queries

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

auto-fill with minmax() is grid magic. The browser creates as many 200px columns as fit in the container, then stretches them to fill the remaining space. No breakpoints needed.

CSS Subgrid (Now Fully Supported)

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: grid;
  grid-row: span 1;
  grid-template-rows: subgrid; /* inherit parent grid rows */
}

Subgrid lets child elements align to the parent grid's tracks. This solves the classic "cards with different content heights but aligned footers" problem elegantly. Browser support is now 95%+ — it's safe to use.

The Decision Table

This is what I actually refer to when I'm unsure:

Combined Patterns: Using Both Together

Real-world layouts almost always use both. Here's a common pattern:

/* Grid for the outer layout */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

/* Flexbox inside a grid cell */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #1e293b;
}

/* Flexbox for a button group inside another cell */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

Grid gives you the macro layout. Flexbox handles the micro alignment within each region. This combination is what professional CSS looks like.

Cheatsheet: Most-Used Properties

Flexbox Quick Reference

.container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline;
  flex-wrap: nowrap | wrap | wrap-reverse;
  gap: 16px;
}

.item {
  flex: 1;               /* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 200px;       /* fixed 200px, no grow/shrink */
  align-self: center;    /* override align-items for this item */
  order: 2;              /* change visual order */
}

Grid Quick Reference

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px 24px;        /* row-gap column-gap */
  place-items: center;   /* align-items + justify-items shorthand */
}

.item {
  grid-column: 1 / 3;    /* span from line 1 to line 3 */
  grid-row: 2;           /* place in row 2 */
  grid-column: span 2;   /* span 2 columns from current position */
  place-self: center;    /* center this item within its cell */
}

For more CSS layout reference including selectors, see the CSS selectors specificity guide.

Accessibility and Layout

Layout method doesn't directly affect accessibility, but placement does. CSS Grid lets you visually reorder elements in ways that differ from the DOM order — this can create confusing tab order for keyboard users.

/* This reordering can hurt keyboard navigation */
.item-visually-first {
  order: -1; /* appears first visually */
}

If you use order or grid-area to reorder items visually, make sure the DOM order still makes sense for screen readers and keyboard navigation. MDN has a thorough guide on reordering and accessibility.

Real-World Example: Blog Card Grid

Let me show both approaches for a common component so you can feel the difference:

Flexbox Version

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

.post-card {
  flex: 1 1 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 12px;
}

.post-card-footer {
  margin-top: auto; /* push to bottom */
}

Grid Version

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.post-card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* image, content, footer */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

The Grid version actually gives you better alignment between cards when they're in the same row — footers line up precisely because they're all in the same row track. The Flex version with margin-top: auto works but only within each individual card.

The Tailwind CSS Angle

If you're using Tailwind, these layout systems map directly to utility classes. Grid and Flex thinking is the same; you're just using class names instead of writing CSS.

<!-- Flexbox navbar in Tailwind -->
<nav class="flex justify-between items-center px-6 h-16">
  <span class="font-bold">Logo</span>
  <ul class="flex gap-6 list-none">
    <li><a href="/">Home</a></li>
    <li><a href="/posts">Blog</a></li>
  </ul>
</nav>

<!-- Grid layout in Tailwind -->
<div class="grid grid-cols-3 gap-6">
  <aside>Sidebar</aside>
  <main class="col-span-2">Content</main>
</div>

Check the Tailwind CSS cheatsheet for a full reference on grid and flex utilities.

Browser Support in 2026

All of these are safe to use without fallbacks in 2026 for modern browser targets. The MDN Grid documentation is the best reference I know for going deeper.

My Workflow

When I start a layout, I ask myself two questions:

1. Do items need to align in two dimensions simultaneously? → Grid
2. Am I just distributing items along a single axis? → Flexbox

Most of the time, the answer is clear. When it's not, I try Flexbox first because it's simpler to reason about, then switch to Grid if I'm fighting with it.

The HTML5 cheatsheet pairs well with this guide if you're thinking about semantic structure alongside your layout approach.

Conclusion

CSS Grid and Flexbox aren't competing — they're complementary. Flexbox handles flow within a line; Grid handles the whole two-dimensional layout. Use both, usually together, and you can build almost any layout with clean, maintainable CSS.

The patterns that serve me most: Grid for page structure and image galleries, Flexbox for navbars, button groups, and card internals. Combine them and you get the best of both.

Start with the decision table above whenever you're unsure. Once you've made the call, refer to the quick reference properties. And remember — the best layout choice is the one your future self (or teammate) can read and understand six months later.

FAQs

Can I use CSS Grid and Flexbox together? Absolutely — this is actually the most common real-world pattern. Use Grid for the outer page layout and Flexbox for aligning items inside each grid cell. They were designed to complement each other.

Which has better browser support, Grid or Flexbox? Both have over 97% global browser support as of 2026. Neither is a concern for modern development. Even CSS Subgrid, which used to be the holdout, now has full support across all major browsers.

Is Flexbox being replaced by Grid? No. They solve different problems. Flexbox handles one-dimensional layouts (a row or a column). Grid handles two-dimensional layouts (rows and columns simultaneously). You'll use both regularly.