Grid vs Flexbox: Which one is better?

This is a topic that’s been battled over many times. Which is better?

Using a Grid system or Flexbox for you websites layout and content? Let’s dive in and learn about the key differences between the two and when they should be used.

Grid is used for two dimensional layouts.
Flexbox is used for one dimensional layouts.

Grid Layouts — Two Dimensional

Grid layouts (i.e. Bootstrap or CSS Grid) are used for Two Dimensional Layouts. What does that mean? It means that if you’re going to create a layout with both Rows and Columns, use the Grid system.

This is a perfect solution for laying out the containers of a page which will contain the content of the page.

Flexbox — One Dimensional

Use Flexbox for One Dimensional layouts. That means content that goes ONE direction — horizontal or vertical.

Take a Navbar for example — You may have a logo and page links laid out horizontally in a row (One directional). Using Flexbox will give you more flexibility and control of the content with less lines of code.

Use the Grid system for page layout.
Use Flexbox for page content.

One Dimension

Two Dimension

The general rule here is Flexbox takes basis on the content while
Grid takes basis on the layout.

Flexbox — The Content King

Let’s check out a simple example to help us understand how both these concepts can be used together.

Let’s use the navbar from above and start from the beginning. Here’s the original HTML.

<nav>
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Search</div>
</nav>

Now before using Flexbox these elements would simply stack on one another like so.

Let’s slap a display: flex on this and see what happens.

nav {
  display: flex;
}

Awesome! We now have our elements nicely laid out in a line.

No lets throw the “SIGN IN” to the far right.

nav > div:nth-child(4) {
  margin-left: auto;
}

What’s really cool is we leave it up to the items to decide how they’re placed. We didn’t have to do anything else but give this a display: flex;

Now we can achieve the EXACT result using the grid system — but let me show you the difference here. I’m going to use the Bootstrap grid system in this example to create our rows and columns.

Here’s our HTML

<div class="row">
  <div class="col-2">Home</div>
  <div class="col-2">About</div>
  <div class="col-2">Contact</div>
  <div class="col-6">Sign In</div>
</div>

The difference here is we’re forced to set a number of columns.

With Bootstraps grid system we need to set the equivalent of 12 columns to expand the full width of the viewport.

Here’s another pain using the grid system for content. If we decide in the future to add another link, we need to change the column widths every time.

<div class="row">
  <div class="col-2">Home</div>
  <div class="col-2">About</div>
  <div class="col-2">Contact</div>
  <div class="col-2">Rad Stuff</div>
  <div class="col-4">Sign In</div>
</div>

With Flexbox we simply drop in the new navbar link, and the elements take care of themselves.

Combining the Two

Let’s take a look at how we would use the two together. Here’s the website layout.

Here’s the HTML (again, using Bootstraps grid system classes).

<div class="container">
  <div class="row">
    <div class="col-12">
      Header
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      Menu
    </div>
    <div class="col-9">
      <div class="row">
        <div class="col-12">
          Content
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          Content
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      Footer
    </div>
  </div>
</div>

Now we’ll add the Navbar — which is a Flexbox container, in place of the “HEADER” text in our Grid layout. For this snippet I’m only showing the HTML that wraps the Navbar.

<header>
  <nav>
    <div>Home</div>
    <div>About</div>
    <div>Search</div>
    <div>Sign In</div>
  </nav>
</header>

And now we have a layout that uses the strengths of both a Grid layout and Flexbox.

I hope you now have a strong understanding of the general and specific differences of Flexbox and Grid, and know how and when to use them.

Thanks for reading!