DEV Community

loading...
Cover image for The ultimate CSS battle: Grid vs Flexbox
Scrimba

The ultimate CSS battle: Grid vs Flexbox

Per
Originally published at hackernoon.com Updated on ・6 min read

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 and CSS Flexbox.

CSS Grid course
Flexbox courseClick 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:

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:

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:

<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.
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.

header {  
    display: flex;  
}

To move the logout button to the far right side, we’ll simply target that element and give it a margin:

header > div:nth-child(3) {  
    margin-left: auto;  
}

Which results in the following:

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.

header {  
    display: grid;  
    grid-template-columns: repeat(10, 1fr);  
}

It’ll look identical to the Flexbox solution.

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

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:

header > div:nth-child(3) {  
    grid-column: 10;  
}

Here’s how that looks when we’re inspecting the grid:

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.

Here’s the markup:

<div class="container">  
  <header>HEADER</header>  
  <aside>MENU</aside>  
  <main>CONTENT</main>  
  <footer>FOOTER</footer>  
</div>

Here’s the 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:

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.

header {  
    display: flex;  
}

Now we can set the logout button to the right:

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:

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, 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.

Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.

Discussion (14)

Collapse
redcamel profile image
RedCamel

just Grid!!!

Collapse
clara profile image
Clara

Hi thanks for this nicly written article. I also really like the illustrations :)
I have one question - I am fairly new to CSS grid so I try to understand its usecases. Why do you prefer using a CSS grid over a mere flexbox for the header and then one flexbox for sidebar and content and footer?
It is so the footer stays in place?
Thank you!

Collapse
zupirio profile image
Christ's Follower

Flexbox is unidirectional, from left to right while CSS Grid is bidirectional. If you follow the course (which is nice and concise) you'll learn that you can combine both grid & flexbox.

Collapse
viccw profile image
Vic Seedoubleyew

Thanks for this article!

I had never heard of Grid, so I am totally new to it.

However, it seems to me that these examples might be misleading in order to understand the use cases for it:

  • using a grid for the final 2-dimensional layout seems like a uselessly rigid design compared to using one main vertical flexbox filled with horizontal flexboxes
  • out of pure instinct, it seems to me that in cases like these examples, using grid would be like using tables for layout: something that has been deemed bad practice, and I understand why, because it looks like perverting their purpose

This is really out of pure intuition on my part, since I don't know this at all, but I found your other example with the image grid a lot more suited.

I would love to have your thoughts on this!

Collapse
dimarconicola profile image
Nicola Di Marco 🔥🙏

It would have been very easy to achieve the same result using Flex only.
The only real use case I can think of when it's essential to use Grid is when there's a long text that has to be dynamically distributed on (changing) number columns.

Collapse
adam_cyclones profile image
Adam Crockett

Is grid the end of the line for layout inavation?

Collapse
zanehannanau profile image
ZaneHannanAU

Nope.

There is no "end of the line" for CSS. In anything.

If you can deal with grid, flex, float and block you're already going pretty well here.

Collapse
adam_cyclones profile image
Adam Crockett

In 20 years is grid the way we will do things, what do you predict?

Thread Thread
zanehannanau profile image
ZaneHannanAU

In 20 years we might be able to predict 2 years if technology with decent reliability.

Collapse
berns_churches profile image
Berns Fire Death

This is so great! Thank you so much for this!

Collapse
aalemayhu profile image
Alexander Alemayhu

I am struggling with CSS grid but Flexbox makes sense to me. This helps, thanks.

Collapse
gunnerr91 profile image
gunnerr91

I would personally prefer just using grid, everytime we are forced to use some margin/padding etc it feels like a hack.

Collapse
nikolicstjepan profile image
Nikolić Stjepan

Thanks Per, this is super useful!

Forem Open with the Forem app