CSS Grid vs Flexbox: When to Use Which Layout Method

CSS Grid vs Flexbox: When to Use Which Layout Method

I spent six months avoiding CSS Grid because I could technically accomplish most layouts with Flexbox. Nested flex containers, negative margins, weird percentage widths — I made it work.

Then I spent one afternoon properly learning Grid and refactored three months of hacky layout code in an afternoon.

The question isn't which one is better. They solve different problems. Understanding that distinction is the difference between fighting CSS and actually enjoying it.

This guide gives you the mental model, the rules of thumb, and the real-world examples to choose correctly every time — and to use both together effectively.

The Core Mental Model

Flexbox: One Dimension

Flexbox controls layout along one axis — either a row (horizontal) or a column (vertical). You decide the direction, and items flow along that axis.

.navbar {
  display: flex;
  flex-direction: row;      /* items go left-to-right */
  justify-content: space-between; /* space along main axis */
  align-items: center;      /* align along cross axis */
}

Think of Flexbox as a smart conveyor belt. Items sit on the belt and you control spacing, alignment, and wrapping.

CSS Grid: Two Dimensions

Grid controls layout along both axes simultaneously — rows and columns at the same time. You define a grid structure and place items anywhere within it.

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;    /* sidebar + main content */
  grid-template-rows: 80px 1fr 60px;   /* header + content + footer */
  min-height: 100vh;
}

Think of Grid as a spreadsheet. You define the columns and rows, then tell each item which cell(s) it occupies.

When to Use Flexbox

Navigation Bars

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
}

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

A navbar is a row of items with space between them — exactly what Flexbox is designed for.

Button Groups

.button-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;  /* wraps on small screens */
}

Card Content (Vertical Stack)

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.card .card-body {
  flex: 1;  /* takes remaining space, pushing footer down */
}

.card .card-footer {
  margin-top: auto;
}

This pattern — flex column with flex: 1 on the body — creates cards where the button is always at the bottom, regardless of content length.

Form Layouts

.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.form-field {
  flex: 1;  /* equal width fields */
}

.form-field.narrow {
  flex: 0 0 120px;  /* fixed width field */
}

When to Use CSS Grid

Page-Level Layouts

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

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

Named grid areas make page layouts readable and maintainable. This pattern is used by most production applications.

Card Grids

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

This single declaration creates a responsive card grid that:

• Puts as many columns as fit
• Each column is at least 280px wide
• Columns stretch to fill available space
• Automatically reflows to fewer columns on small screens

No media queries needed.

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header" auto
    "nav main aside" 1fr
    "footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

The classic three-column layout (nav, main, aside) with header and footer — 6 lines of CSS with Grid, dozens of lines with older methods.

Image Gallery with Span

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}

.gallery .featured {
  grid-column: span 2;  /* takes 2 columns */
  grid-row: span 2;     /* takes 2 rows */
}

Grid span is impossible to replicate cleanly with Flexbox.

Side-by-Side Comparison

The Quick Rule

• One direction? → Flexbox
• Two directions (rows and columns)? → Grid
• Not sure? → Try Grid first for layouts, Flexbox for components

Using Both Together (The Right Pattern)

The most common real-world pattern combines both:

/* Grid handles the page layout */
.page {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

/* Flexbox handles the navbar inside the header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

/* Flexbox handles the card content inside each grid cell */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

Grid owns the macro layout. Flexbox owns the micro layout inside components. They don't compete — they complement.

Common Gotchas

Flexbox: items don't wrap by default

/* Items overflow the container */
.row { display: flex; }

/* Items wrap to next line */
.row { display: flex; flex-wrap: wrap; }

Grid: items don't stretch without explicit sizing

/* Columns are auto-width (content-sized) */
.grid { display: grid; grid-template-columns: auto auto auto; }

/* Columns fill available space equally */
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }

/* Shorthand */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

Both: the gap property works the same way

.flex-row { display: flex; gap: 1rem; }
.grid-layout { display: grid; gap: 1.5rem; }

/* Different row and column gaps */
.grid-layout { gap: 2rem 1rem; } /* row-gap column-gap */

For a complete walkthrough of CSS layouts from scratch, our HTML and CSS beginners guide covers the box model and basic layouts. To see these layout techniques applied in responsive design, see our responsive web design guide.

Frequently Asked Questions

Should I use Grid or Flexbox?

Flexbox for one-dimensional layouts (rows or columns). Grid for two-dimensional layouts (rows and columns simultaneously). Use both together.

Is CSS Grid harder?

Grid has more properties but isn't fundamentally harder. Learn Flexbox first, then Grid. The mental models reinforce each other.

Can I use them together?

Yes — and you should. Grid for the page structure, Flexbox for components inside each grid area.

What's the difference between auto-fill and auto-fit?

auto-fill creates empty columns. auto-fit collapses them. Use auto-fit for card grids.

Does Grid work in all browsers?

Yes. Full cross-browser support since 2017. Not a concern in 2025.