CSS Grid vs Flexbox: When to Use Each (With Real Examples)

Quick Takeaway: Flexbox is for 1D layouts (row OR column). Grid is for 2D layouts (rows AND columns). They're complementary, not competitors. Modern layouts often use both together.

The Fundamental Difference

Feature	Flexbox	CSS Grid
Dimensionality	1D (row or column)	2D (rows and columns)
Content Flow	Content-first	Layout-first
Browser Support	IE10+	IE11+ (partial), full in modern
Best For	Components, navigation, centering	Page layouts, complex grids

When to Use Flexbox (With Code)

1. Navigation Menus

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: stretch;
  }
}

2. Centering Content (The Easy Way)

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

3. Equal-Height Cards

.card-container {
  display: flex;
  gap: 1.5rem;
}

.card {
  flex: 1; /* All cards equal width */
  display: flex;
  flex-direction: column;
}

.card-content {
  flex-grow: 1; /* Pushes footer to bottom */
}

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

4. Sticky Footer

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex-grow: 1; /* Pushes footer down */
}

.footer {
  /* Always at bottom */
}

When to Use CSS Grid (With Code)

1. Page Layout (Holy Grail)

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Responsive: Single column on mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
  }
}

2. Responsive Image Gallery

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

/* auto-fit: Creates as many columns as fit
   minmax(250px, 1fr): Each column min 250px, max fills space
   Result: Automatically responsive without media queries! */

3. Overlapping Elements

.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.hero-image {
  grid-column: 1;
  grid-row: 1;
}

.hero-text {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding: 2rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

4. Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(150px, auto));
  gap: 1.5rem;
}

/* Widget spans multiple cells */
.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

.widget-tall {
  grid-row: span 2;
}

Using Flexbox + Grid Together

Modern layouts combine both:

/* Grid for overall page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Flexbox inside grid cells */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

/* Each card uses flexbox internally */
.card {
  display: flex;
  flex-direction: column;
}

Decision Flowchart

Ask yourself:

Do I need to control both rows AND columns? → Grid
Am I laying out a single row or column? → Flexbox
Does content need to overlap? → Grid
Do items need to be equal height? → Both work
Is this a component (nav, card, button group)? → Flexbox
Is this a page or section layout? → Grid

Tools & Resources

CSS Generator - Generate grid/flexbox code
Box Shadow Generator - Add depth to layouts
Grid by Example: gridbyexample.com (Rachel Andrew)
Flexbox Froggy: Interactive flexbox game
Grid Garden: Interactive grid game

Conclusion

Flexbox and Grid aren't rivals—they're teammates. Use Flexbox for component-level layouts (navigation, cards, button groups) and Grid for page-level layouts (overall structure, galleries, dashboards). Master both, and you'll handle any layout challenge with confidence.

Try Our Free Tools

Explore All Tools →

📐 CSS Grid vs Flexbox: When to Use Each (With Real Examples)