📚 Lesson 6: Grid vs Flexbox

The Question Everyone Asks

"Should I use Grid or Flexbox?" The answer: Both! They're not competitors - they're teammates. Each solves different problems.

The Simple Rule

Grid: Two-Dimensional

Grid excels at layouts where you need to control both axes at once.

/* Grid: Controls rows AND columns */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
}

Perfect for: Page layouts, dashboards, card grids, complex UIs

Flexbox: One-Dimensional

Flexbox is perfect for arranging items in a row OR column (not both).

/* Flexbox: Controls one direction */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Perfect for: Navigation bars, button groups, centering, toolbars

Real-World Examples

Example 1: Navigation Bar

Use Flexbox - items in a single row

.nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

Example 2: Page Layout

Use Grid - header, sidebar, content, footer

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
}

Example 3: Card Content

Use Flexbox - stacking elements vertically

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

Example 4: Photo Gallery

Use Grid - rows and columns of images

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

Using Them Together

The real power comes from combining them!

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

/* Flexbox for navigation inside grid */
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Grid for card layout inside grid */
.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Flexbox for card content */
.card {
  display: flex;
  flex-direction: column;
}

Decision Flowchart

Common Scenarios

The Truth

Don't overthink it! Start with whichever feels natural, and switch if it becomes difficult. Both can achieve similar results - Grid just makes 2D layouts easier, and Flexbox makes 1D layouts simpler.