The ultimate CSS battle: Grid vs Flexbox
Tags: css, cssgrid, flexbox, tutorial
Published: 2019-06-07 14:01:19

---
title: 'The ultimate CSS battle: Grid vs Flexbox'
description: 'Learn how they differ, and when you should use one over the other.'
slug: /@perborgen/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
tags: css, css grid, flexbox, tutorial
canonical_url: https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
published: true
---

CSS Flexbox has become extremely popular amongst front-end developers in the last couple of years. This isn’t surprising, as it has made it a lot easier for us to create dynamic layouts and align content within containers.

However, there’s a new kid in town called CSS Grid, and it’s got a lot of the same capabilities as Flexbox. In some cases, it’s better than Flexbox, while in other cases it’s not.

This seems to be a source of confusion for developers. So in this article compare the two modules, both a micro and macro level.

> If you want to learn the two modules properly, check out my free courses [CSS Grid](https://scrimba.com/g/gR8PTE?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox) and [CSS Flexbox](https://scrimba.com/g/gflexbox?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox).

[![CSS Grid course](https://cdn-images-1.medium.com/max/600/1*OKboVzVnQKyPQJT4MyddYQ.png)](https://scrimba.com/g/gR8PTE?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox)
[![Flexbox course](https://cdn-images-1.medium.com/max/600/1*MsclmqDqE6YVzCiUt5Kd-g.png)](https://scrimba.com/g/gflexbox?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox)*Click on an image to get to its respective course.*

Now let’s get started!

### One dimension vs two dimensions

If you are to take one lesson from this article, let it be this one:

> Flexbox is made for one-dimensional layout and Grid is made for two-dimensional layouts.

This means that if you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox:

![](https://cdn-images-1.medium.com/max/800/1*h6dcLWRp0lXeWklPAFK8cA.png)

It’ll give you more flexibility than CSS Grid. It’ll also be easier to maintain and require less code.

However, if you’re going to create an entire layout in two dimensions — with both rows _and_ columns — then you should use CSS Grid:

![](https://cdn-images-1.medium.com/max/1200/1*AxItLokVtaF56WMo_ZF6Pw.png)

In this case, CSS Grid will give you more flexibility, make your markup simpler and the code will be easier to maintain.

Now you can, of course, combine the two. In the example above it would be perfect to use Grid for the page layout, and then Flexbox to align the content inside the header. This’ll give you the best of both worlds. And I’ll show you exactly how to do at the end of this article.

### Content-first vs layout-first

Another core difference between the two is that Flexbox bases in the **content** while Grid bases in the **layout**. This might seem abstract, so let’s look at a specific example, as that makes it easier to understand.

We’ll use the header from the previous paragraph. Here’s the HTML for it:
```html
<header>  
    <div>Home</div>  
    <div>Search</div>  
    <div>Logout</div>  
</header>
```
Before we turned it into a Flexbox layout these div’s would have been stacked on top of each other like this:

![I’ve added a little bit of basic styling, which as nothing to do with Flexbox or Grid, so I’m leaving that out.](https://cdn-images-1.medium.com/max/800/1*VRnOqt5g9NVKY-NUh0vh7Q.png)
I’ve added a little bit of basic styling, which as nothing to do with Flexbox or Grid, so I’m leaving that out.

#### Flexbox header

However, when we give it a `display: flex;` the items will be places nicely on a line.
```css
header {  
    display: flex;  
}
```
![](https://cdn-images-1.medium.com/max/800/1*XHmGGavmUsEi3-vd9v0vcg.png)

To move the _logout_ button to the far right side, we’ll simply target that element and give it a margin:
```css
header > div:nth-child(3) {  
    margin-left: auto;  
}
```
Which results in the following:

![](https://cdn-images-1.medium.com/max/800/1*1inbBN_44U2HSwFL3Ech-w.png)

What I want you to notice here is that we leave it up to the items themselves to decide how they’re placed. We didn’t have to pre-define anything else than `display: flex;` initially.

This is at the core of the difference between Flexbox and Grid, and it will be more apparent as we recreate this header using Grid.

> Even though CSS Grid isn’t build to create one-dimensional headers, it’s still a good exercise to do it in this article, as it teaches us about the core differences between Flexbox and Grid.

#### Grid header

We can create our header in several different ways using CSS Grid. I’m going to go with a pretty straight forward one, where our grid has ten columns, each being one fraction unit wide.
```css
header {  
    display: grid;  
    grid-template-columns: repeat(10, 1fr);  
}
```
It’ll look identical to the Flexbox solution.

![](https://cdn-images-1.medium.com/max/800/1*VPeA-uXOph9dNuOEUAz_kQ.png)

However, we can peek under the hood to see what’s different. We’ll use the Chrome inspector to inspect the column lines:

![](https://cdn-images-1.medium.com/max/800/1*RK-Kw7WoW6hXnpIYIPZF3Q.png)

The key difference with this approach is that we had to define the columns — the layout — first. We start with defining the width of the columns, and _then_ we place the content in the available grid cells.

> This approach forced us to take a stance on how many columns we wanted to split our header into.

Unless we change the grid, we’re stuck with ten columns. A limitation we wouldn’t have had to deal with in Flexbox.

In order to change the _logout_ to the far right hand side, we’ll place it in the tenth column, like this:
```css
header > div:nth-child(3) {  
    grid-column: 10;  
}
```
Here’s how that looks when we’re inspecting the grid:

![](https://cdn-images-1.medium.com/max/800/1*u5z2zikNjwyL84dcUhRgJA.png)

We couldn’t simply have given it a `margin-left: auto;` because the _logout_ button had already been placed in a specific cell in the layout, in the third column. To move it, we had to find another grid cell for it.

### Combining the two

Now let’s look at how to use both in combination, merging our header into our website layout. We’ll start by building the website layout.

![](https://cdn-images-1.medium.com/max/800/1*OcjCKOnh48lYnUuEJw_ZBA.png)

Here’s the markup:
```html
<div class="container">  
  <header>HEADER</header>  
  <aside>MENU</aside>  
  <main>CONTENT</main>  
  <footer>FOOTER</footer>  
</div>
```
Here’s the CSS:
```css
.container {  
    display: grid;      
    grid-template-columns: repeat(12, 1fr);  
    grid-template-rows: 50px 350px 50px;  
}
```
We’ll place the items on the grid like this:
```css
header {  
    grid-column: span 12;  
}

aside {  
    grid-column: span 2;  
}

main {  
    grid-column: span 10;  
}

footer {  
    grid-column: span 12;  
}
```
Now we’ll simply add the header. We’ll turn the header — which is an _item_ in our CSS Grid — into a Flexbox container.
```css
header {  
    display: flex;  
}
```
Now we can set the logout button to the right:
```css
header > div:nth-child(3) {  
    margin-left: auto;  
}
```
And there we have a perfectly fine layout which uses the best from both Grid and Flexbox. Here’s how the two containers look:

![](https://cdn-images-1.medium.com/max/1200/1*jPJsp3kukI6WNQBntfHsWg.png)

So now you should have a strong understanding of the general and specific differences between Flexbox and Grid, and know how to use them together.

#### Browser support

Before we end, I also need to mention browser support. At the time of publishing this article, [92% of global website traffic supports CSS Grid](https://caniuse.com/#feat=css-grid), and it’s climbing.

I believe CSS Grid will turn into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox the last couple of years.


Click the image below to see a preview of the course.

[![](https://cdn-images-1.medium.com/max/1200/1*UOpwxw1tMK30dOG1jn6IRg.png)](https://scrimba.com/p/pWqLHa/cg9PpTb?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox)

Thanks for reading! My name is Per, I’m the co-founder of [Scrimba](https://scrimba.com?utm_source=dev.to&utm_medium=referral&utm_campaign=gR8PTE_grid_vs_flexbox), and I love helping people learn new skills. Follow me on [Twitter](https://twitter.com/perborgen) if you’d like to be notified about new articles and resources.