CSS Grid vs Flexbox: When to Use Each

CSS Grid – Two-Dimensional Layout

CSS Grid excels when you need to control both rows and columns simultaneously. It’s ideal for creating page structures, dashboards, and card layouts.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  height: 100vh;
}

.header {
  grid-column: 1 / -1;
}

.sidebar {
  grid-column: 1;
}

.main {
  grid-column: 2;
}

.aside {
  grid-column: 3;
}

.footer {
  grid-column: 1 / -1;
}

Flexbox – One-Dimensional Layout

Flexbox is designed for arranging items in a single direction (row or column). It’s perfect for navigation bars, button groups, and aligning or distributing space between elements.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.flex-item {
  flex: 1;
}

When to Use Grid

Choose Grid for layouts that need precise control over rows and columns. A common example is a dashboard layout:

.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main widgets"
    "footer footer footer";
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
  gap: 1rem;
}

.dashboard-header {
  grid-area: header;
}

.dashboard-sidebar {
  grid-area: sidebar;
}

.dashboard-main {
  grid-area: main;
}

.dashboard-widgets {
  grid-area: widgets;
}

.dashboard-footer {
  grid-area: footer;
}

This approach makes the layout more semantic and easier to maintain.

---

When to Use Flexbox

Use Flexbox when your layout is one-dimensional, like aligning navigation items, centering content, or spacing buttons evenly.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #333;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-links a:hover {
  color: #007bff;
}

This makes navigation bars or button groups flexible and responsive with minimal code.

---

Combining Both

In practice, the most powerful layouts often combine Grid and Flexbox. Use Grid for the overall structure, and Flexbox for local alignment inside components.

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.page-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.page-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

This hybrid approach provides structure at the page level while still giving flexibility within sections.

---

Conclusion

• Use CSS Grid for complex, two-dimensional layouts involving rows and columns.
• Use Flexbox for one-dimensional layouts like navigation bars, button groups, or centering content.
• Don’t hesitate to combine both to take advantage of their strengths.

Mastering when and how to use Grid and Flexbox will make your layouts cleaner, more efficient, and easier to maintain.