Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for The ultimate CSS battle: Grid vs Flexbox
Scrimba profile imagePer
Per forScrimba

Posted on • Edited on • Originally published athackernoon.com

     

The ultimate CSS battle: Grid vs Flexbox

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 coursesCSS Grid andCSS 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 rowsand 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 thecontent while Grid bases in thelayout. 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>
Enter fullscreen modeExit fullscreen mode

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 adisplay: flex; the items will be places nicely on a line.

header{display:flex;}
Enter fullscreen modeExit fullscreen mode

To move thelogout 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;}
Enter fullscreen modeExit fullscreen mode

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 thandisplay: 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);}
Enter fullscreen modeExit fullscreen mode

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, andthen 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 thelogout to the far right hand side, we’ll place it in the tenth column, like this:

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

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

We couldn’t simply have given it amargin-left: auto; because thelogout 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:

<divclass="container"><header>HEADER</header><aside>MENU</aside><main>CONTENT</main><footer>FOOTER</footer></div>
Enter fullscreen modeExit fullscreen mode

Here’s the CSS:

.container{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:50px350px50px;}
Enter fullscreen modeExit fullscreen mode

We’ll place the items on the grid like this:

header{grid-column:span12;}aside{grid-column:span2;}main{grid-column:span10;}footer{grid-column:span12;}
Enter fullscreen modeExit fullscreen mode

Now we’ll simply add the header. We’ll turn the header — which is anitem in our CSS Grid — into a Flexbox container.

header{display:flex;}
Enter fullscreen modeExit fullscreen mode

Now we can set the logout button to the right:

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

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 ofScrimba, and I love helping people learn new skills. Follow me onTwitter if you’d like to be notified about new articles and resources.

Top comments(13)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
redcamel profile image
RedCamel
https://github.com/redcamel/
  • Location
    korea / seoul
  • Work
    FrontEnd
  • Joined

just Grid!!!

CollapseExpand
 
clara profile image
Clara
Fullstack Developer and Coding Teacher 👩‍💻
  • Location
    Seattle
  • Education
    Le Wagon
  • Work
    Fullstack Devloper and Teacher at Freelancer
  • Joined

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!

CollapseExpand
 
zupirio profile image
Zupirio
  • Joined

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.

CollapseExpand
 
dimarconicola profile image
Nicola Di Marco 🔥🙏
Founder of Dexwallet, Member of Invision Leadership Forum, formerly @ Amorelie, ROCKET, LQID, Mosaicoon
  • Location
    Berlin
  • Work
    Designer at Dexwallet.io
  • Joined

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.

CollapseExpand
 
viccw profile image
Vic Seedoubleyew
  • Joined

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!

CollapseExpand
 
adam_cyclones profile image
Adam Crockett 🌀
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
  • Location
    City of Bath, UK 🇬🇧
  • Education
    11 plus years* active enterprise development experience and a Fine art degree 🎨
  • Work
    Web Development Consultant at ForgeRock
  • Joined

Is grid the end of the line for layout inavation?

CollapseExpand
 
zanehannanau profile image
ZaneHannanAU
I'm a person
  • Location
    Australia
  • Work
    null at null
  • Joined

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.

CollapseExpand
 
adam_cyclones profile image
Adam Crockett 🌀
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
  • Location
    City of Bath, UK 🇬🇧
  • Education
    11 plus years* active enterprise development experience and a Fine art degree 🎨
  • Work
    Web Development Consultant at ForgeRock
  • Joined

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

Thread Thread
 
zanehannanau profile image
ZaneHannanAU
I'm a person
  • Location
    Australia
  • Work
    null at null
  • Joined

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

CollapseExpand
 
berns_churches profile image
Berns Fire Death
  • Joined

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

CollapseExpand
 
alexanderalemayhu profile image
Alexander Alemayhu
My name is Alexander and I am a tech lead by day. During the night I am an open-source developer on a mission to build helpful tools to help people in their learning journeys.
  • Email
  • Location
    Oslo
  • Work
    Web Developer at Fortress Reklamebyrå AS
  • Joined

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

CollapseExpand
 
gunnerr91 profile image
gunnerr91
  • Joined

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

CollapseExpand
 
nikolicstjepan profile image
Stjepan
Full stack web developer
  • Location
    Croatia
  • Work
    Freelance Web developer
  • Joined

Thanks Per, this is super useful!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

More fromScrimba

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp