Lesson 6: Grid vs Flexbox

The Question Everyone Asks

"Should I use Grid or Flexbox?" The answer is both. They are not competitors, they are 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 well suited for arranging items in a row or a column, not both at once.

/* 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, since items sit in a single row.

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

Example 2: Page Layout

Use Grid, for header, sidebar, content, and footer.

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

Example 3: Card Content

Use Flexbox, for stacking elements vertically.

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

Example 4: Photo Gallery

Use Grid, for 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 Checklist

• Do I need to control rows and columns? Use Grid.
• Am I arranging items in a single row or column? Use Flexbox.
• Do I need the layout to be responsive with wrapping? Use Grid (auto-fit).
• Am I just centering one item? Use Flexbox, it is simpler.

Common Scenarios

The Truth

Do not 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.