CSS Grid vs Flexbox: When to Use Which

The Ultimate Layout Battle

For years, frontend developers relied on floats and clearfixes to build web layouts. Then came Flexbox, which solved 90% of layout alignment issues. Shortly after, CSS Grid was introduced, promising to solve the remaining 10%.

Despite both modules being fully supported in all modern browsers for years, developers still frequently ask: "Should I use Grid or Flexbox for this?"

The short answer is: Flexbox is for 1-dimensional layouts (rows OR columns). CSS Grid is for 2-dimensional layouts (rows AND columns). But the long answer requires understanding how they conceptually differ.

When to Use Flexbox

Flexbox is designed for laying out items in a single direction. Its primary superpower is content-driven sizing. Flexbox looks at the children (the content) and figures out how to distribute the available space around them.

Use Flexbox when:

1. You need horizontal or vertical alignment: Centering a div both vertically and horizontally (display: flex; justify-content: center; align-items: center;) is Flexbox's most famous use case.
2. You don't know the exact number of items: If you have a navigation menu and want the links to just space out evenly regardless of if there are 3 links or 5 links.
3. You want items to wrap naturally: A tag list (like #javascript, #react, #css) that just flows onto the next line when it runs out of space.

When to Use CSS Grid

CSS Grid is designed for complex, structured layouts. Its primary superpower is container-driven sizing. You define the grid structure on the parent container, and the children just fall into the designated slots.

Use CSS Grid when:

1. You need both rows and columns simultaneously: Building a dashboard with a sidebar, a header, and a main content area.
2. You want rigid, predictable structures: Building a photo gallery where every card must be exactly 300px wide, regardless of how much text is inside the card.
3. You want items to overlap: Grid allows you to place multiple items in the exact same grid cell without relying on messy position: absolute hacks.

The Magic of Grid Auto-Fit

One of the most powerful features in modern CSS is building responsive grids without media queries. CSS Grid makes this trivial.

Instead of writing complex breakpoints, you can use auto-fit and minmax():

.gallery {
  display: grid;
  /* Automatically create as many columns as possible that are AT LEAST 250px wide */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

This single line of CSS creates a fully responsive card grid that elegantly wraps on mobile devices!

Combining Both for Perfection

You don't have to choose just one. The best developers use them together.

The Golden Rule: Use CSS Grid for the macro-layout (the page skeleton, the main sections, the card grids) and use Flexbox for the micro-layout (aligning an icon next to text inside a button, or spacing out links in a navbar).

<!-- Grid for the Macro Layout -->
<section class="grid grid-cols-3 gap-8">
  <article class="card">
    <!-- Flexbox for the Micro Layout -->
    <div class="flex items-center justify-between">
      <h2>Article Title</h2>
      <button class="flex items-center gap-2">
        <svg>...</svg> Read More
      </button>
    </div>
  </article>
</section>

Stop fighting the CSS layout engine. Let Grid handle the architecture, and let Flexbox handle the alignment.