CSS Grid vs Flexbox: The Complete Guide to Web Layout in 2026

The Core Difference: 1D vs 2D

CSS Flexbox and CSS Grid are both layout systems built into modern CSS, and the most common beginner mistake is using them interchangeably or choosing one and avoiding the other. They were designed for different purposes and complement each other beautifully.

Flexbox is a one-dimensional layout system. It arranges items along a single axis — either in a row or in a column. It is ideal for distributing space among items in a line and aligning them relative to each other.

CSS Grid is a two-dimensional layout system. It arranges items in rows and columns simultaneously. It is designed for page-level layouts and complex two-dimensional arrangements where you need precise control over both axes at once.

The rule of thumb: if you are laying out items in a single direction (a row of buttons, a list of cards, a navigation bar), reach for Flexbox. If you are defining the overall structure of a page or a component that has both rows and columns, reach for Grid.

Flexbox: The One-Dimensional Workhorse

A navigation bar is the classic Flexbox use case. Items in a line, space distributed between them, all vertically centered:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: #0f172a;
}

.navbar-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

.navbar-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.navbar-cta {
  margin-left: auto;
}

<nav class="navbar">
  <span class="navbar-logo">ToolBox Hub</span>
  <ul class="navbar-links">
    <li><a href="/tools">Tools</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <button class="navbar-cta">Get Started</button>
</nav>

Card Row with Equal Heights

Flexbox makes it trivial to create a row of cards where all cards stretch to the same height regardless of content length:

.card-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;  /* Wrap to next line on small screens */
}

.card {
  flex: 1 1 280px;  /* Grow, shrink, minimum width of 280px */
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: white;
}

.card-body {
  flex: 1;  /* Push footer to bottom */
}

.card-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

The flex: 1 1 280px shorthand means: grow to fill available space, shrink if needed, and have a base size of 280px. Combined with flex-wrap: wrap, cards will reflow to multiple rows on narrow screens automatically.

Perfect Centering

The infamous centering problem in CSS is trivially solved with Flexbox:

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

CSS Grid: The Two-Dimensional Powerhouse

Page Layout

Grid shines for defining the macro structure of a page:

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

.sidebar  { grid-area: sidebar; background: #0f172a; }
.header   { grid-area: header; border-bottom: 1px solid #e2e8f0; }
.main     { grid-area: main; padding: 32px; }
.footer   { grid-area: footer; }

<div class="page-layout">
  <aside class="sidebar">...</aside>
  <header class="header">...</header>
  <main class="main">...</main>
  <footer class="footer">...</footer>
</div>

Named grid areas make the layout intent explicit and readable. Moving the sidebar from left to right is a one-line CSS change.

Responsive Image Gallery

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

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

repeat(auto-fill, minmax(200px, 1fr)) is one of the most powerful lines in CSS. It creates as many columns as will fit, each at least 200px wide, expanding to fill available space. No media queries needed for the basic responsiveness.

Dashboard Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 24px;
  padding: 32px;
}

.stat-card {
  grid-column: span 3;  /* Each stat takes 3 of 12 columns */
}

.chart-large {
  grid-column: span 8;
  grid-row: span 2;
}

.chart-small {
  grid-column: span 4;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .chart-large,
  .chart-small {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Combining Grid and Flexbox

The most powerful layouts use both systems together. Grid handles the macro layout (where sections live on the page), and Flexbox handles the micro layout (how items inside each section are arranged).

/* Grid for page structure */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

/* Flexbox for items inside the header */
.header {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid #e2e8f0;
}

/* Grid for the main content area */
.main {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 32px;
  align-content: start;
}

/* Flexbox for items inside each card */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

Modern CSS Layout Features in 2026

Subgrid

Subgrid is now widely supported and solves the problem of nested grids that need to align with a parent grid:

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

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;  /* Use parent grid's row tracks */
}

Container Queries

Container queries let components respond to their container's size rather than the viewport — enabling truly modular, reusable layouts:

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: flex;
  flex-direction: column;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;  /* Switch to horizontal when container is wide enough */
  }
}

Quick Reference: When to Use What

Situation	Use
Navigation bar	Flexbox
Centering a single element	Flexbox
Row of equally-sized cards	Flexbox with wrap
Page-level structure (sidebar + main)	Grid
Image gallery	Grid
Dashboard with widgets of different sizes	Grid
Items inside a card	Flexbox
Complex form layout	Grid
Button group	Flexbox
Holy grail layout (header/sidebar/main/footer)	Grid

Practical Tips

Don't use Flexbox for page structure. It works, but Grid was designed for this. Grid makes the intent explicit.
Don't use Grid for simple row/column alignment. Flexbox has less overhead for simple use cases.
Use gap instead of margins. Both Grid and Flexbox support gap for consistent spacing between items.
Use fr units for proportional columns. 1fr 2fr gives you a 1:2 ratio that works at any screen size.
Inspect layouts in browser devtools. Both Chrome and Firefox have excellent Grid and Flexbox overlay inspectors.

Mastering both Flexbox and Grid is one of the highest-leverage CSS skills you can develop. Together, they cover almost every layout challenge you will encounter in modern web development. The key is knowing which tool to reach for — and now you do.