blogs.huzi.pk
Back to all posts
CSS

CSS Grid vs. Flexbox: Which One Should You Use?

By Huzi
CSS Grid vs. Flexbox: Which One Should You Use?

For years, developers relied on hacks like floats and positioning to create webpage layouts. The arrival of Flexbox and CSS Grid revolutionized layout design, but it also introduced a common question: "Which one should I use?" While they both help arrange elements, they are designed to solve different problems.

Understanding the fundamental difference between them is the key to mastering modern CSS layouts. This guide will break down their core concepts, show you when to use each, and demonstrate how they can work together.

The Core Difference: One Dimension vs. Two Dimensions

The simplest way to think about it is:

  • Flexbox is for one-dimensional layouts. This means it excels at arranging items in a single row or a single column. Think of a navigation bar, a list of cards, or aligning three items horizontally.
  • Grid is for two-dimensional layouts. This means it's designed to arrange items in both rows and columns simultaneously. Think of a complete page layout with a header, sidebar, and main content area, or a complex image gallery.

| Feature | Flexbox (1D) | Grid (2D) | | ------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Primary Goal | Aligning items in a line (row or column) and managing space between them. | Creating a grid system for placing items in rows and columns. | | Content Flow | Content-first. The size of the items can dictate the layout. | Layout-first. You define the grid structure, and items are placed into it. | | Best For | Components: navbars, card headers, button groups, aligning form elements. | Overall page layouts, complex dashboards, image galleries, anything with a strict grid. | | Key Properties | display: flex, flex-direction, justify-content, align-items, flex-wrap | display: grid, grid-template-columns, grid-template-rows, grid-gap |

When to Use Flexbox

Use Flexbox when you need to align a group of items in a single direction, either horizontally or vertically. Flexbox is "content-aware," meaning the items can grow or shrink to best fit the available space.

Classic Use Case: A Navigation Bar

A navigation bar is a perfect example of a one-dimensional layout. You have a list of items (links) that you want to space out evenly in a row.

HTML:

<nav class="navbar">
  <a href="#" class="logo">MyApp</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="cta-button">Sign Up</button>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between; /* Magically spaces items out */
  align-items: center; /* Vertically aligns items */
  padding: 1rem;
  background-color: #333;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px; /* Modern way to add space between flex items */
}

In this example, display: flex on the .navbar turns its direct children (.logo, .nav-links, .cta-button) into flex items. justify-content: space-between pushes the logo to the left, the button to the right, and keeps the links in the middle. align-items ensures they are all vertically centered. It's simple, powerful, and exactly what Flexbox was made for.

When to Use Grid

Use Grid when you need to create a layout with both rows and columns. Grid allows you to define the structure of the layout first and then place elements onto that grid.

Classic Use Case: A Holy Grail Layout

The "Holy Grail" layout (header, sidebar, main content, and footer) is a classic two-dimensional problem.

HTML:

<div class="holy-grail-layout">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

CSS:

.holy-grail-layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* 2 columns: a fixed 200px sidebar and a flexible main area */
  grid-template-rows: auto 1fr auto; /* 3 rows: header, content area, footer */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 10px;
}

header { grid-area: header; }
nav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Here, display: grid establishes the grid container. grid-template-columns and grid-template-rows define the grid's structure. The real magic is grid-template-areas, which allows you to visually map out your layout and assign elements to named areas. This is something Flexbox simply cannot do.

The Best of Both Worlds: Grid and Flexbox Together

The most powerful layouts often use both Grid and Flexbox. You don't have to choose one or the other; they are designed to be complementary.

  • Use Grid for the macro layout: The overall page structure.
  • Use Flexbox for the micro layout: The components inside the grid areas.

Example: Let's combine our two previous examples. We'll use Grid for the page structure and Flexbox for the navigation bar inside the header grid area.

HTML:

<div class="holy-grail-layout">
  <header>
    <!-- Our Flexbox-powered navbar goes here -->
    <nav class="navbar">
      <a href="#" class="logo">MyApp</a>
      <ul class="nav-links">...</ul>
      <button class="cta-button">Sign Up</button>
    </nav>
  </header>
  <nav>Sidebar</nav>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

CSS:

/* --- Grid CSS (Macro Layout) --- */
.holy-grail-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
/* ... other grid-area assignments ... */

/* --- Flexbox CSS (Micro Layout) --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.nav-links {
  display: flex;
  gap: 20px;
}

This is the modern CSS workflow. Grid provides the robust, two-dimensional skeleton for the page, and Flexbox provides the fine-grained control needed to align the items within each component.

Conclusion

Stop thinking of it as "Grid vs. Flexbox." Start thinking of it as "Grid and Flexbox."

  • Need to align things in a single line (a row or a column)? Use Flexbox.
  • Need to create a layout with rows and columns? Use Grid.

By understanding their