CSS Grid vs Flexbox: When to Use Which?

In the old days, we used float and table. It was a nightmare. Today, we have two superpowers: Flexbox and Grid.

Flexbox (1-Dimensional)

Use Flexbox when you have a row OR a column of items.

• Navbars
• Button groups
• Centering an element

.container {
  display: flex;
  justify-content: center; /* Main axis */
  align-items: center;     /* Cross axis */
}

CSS Grid (2-Dimensional)

Use Grid when you have both rows AND columns.

• Photo galleries
• Page layouts (Header, Sidebar, Main, Footer)

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* Sidebar fixed, Main flexible */
  gap: 20px;
}

The Rule of Thumb

• Content-Out? Use Flexbox. Let the content define the size.
• Layout-In? Use Grid. Let the layout define the size.