DEV Community

Cover image for CSS Grid vs Flexbox
Lucas Olivera
Lucas Olivera

Posted on • Updated on

CSS Grid vs Flexbox

The main reason I wanted to learn CSS was because I was very interested in Responsive Web Design. I tried to use the 'float' method until I discovered it was a bit outdated and there were better options for a web layout.

I started using Flexbox to organize my layout. Until I discovered CSS Grid. But I was confused as Flexbox and CSS Grid are very similar and I didn't know when to use which. So, let me tell you what I learnt from my new research.

The main difference

"Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts."

One dimension example

Two dimensions example

More differences

  • CSS Grid’s approach is layout-first while Flexbox’s approach is content-first.
  • Flexbox layout is most appropriate to the components of an application and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
  • Tip: You can even combine these layout models. Note that you can use a Flexbox container inside a CSS Grid container (and vice-versa too!). Combination of Flexbox and CSS Grid

Examples

I created some time ago a tribute page as a project for the FreeCodeCamp curriculum. Fully responsive and made with Flexbox, in case you want to check how to use it.

Edit: I also made the same project with CSS Grid, check it out.

Practice both!

Thomas Park has created two cute games to learn and practice Flexbox and CSS Grid.

When I have doubts

CSS Tricks has simple guides to use Flexbox and CSS Grid. I check them everytime I have a doubt or don't remember syntax.

Browser Compatibility

You can check which browsers support Flexbox here. Check here for CSS Grid compatibility.

Also check implementing CSS grid in Internet Explorer

Sources

Thoughts

Which one do you use the most?

Thank you for reading. Don't forget to follow me on dev.to and Twitter!

Top comments (21)

Collapse
 
kaelscion profile image
kaelscion

I love this post. I'm currently writing a tutorial myself about why it should be Flex and Grid instead of Flex vs Grid. I don't think I need to do that now though! Excellent post! I like to think of Grid as the "bones" and flex as the "flesh", if that makes any sense 😁😁

Collapse
 
lmolivera profile image
Lucas Olivera

Thank you <3 I really suggest you write your tutorial nevertheless. Writing it will make you discover some things you didn't know you didn't understand that well and in consequence you learn more!

Collapse
 
kaelscion profile image
kaelscion

I usually write tutorials so that I can help myself to fully understand the concepts I use every day. It's kinda fun to see how much potential a particular bit of code has beyond what you have been using it to do for the past several years :D.

Collapse
 
dance2die profile image
Sung M. Kim

Thank you, Lucas.

The difference of 1D vs 2D was a great insight 😮
I can find myself telling others about it 🙂

Collapse
 
dahnielson profile image
Anders Dahnielson

Flexbox is quite intuitive for designers and implementors coming from a native desktop background, as it is modeled on the common way to position GUI widgets in toolkits using layout widgets with names such as HBox and VBox.

Collapse
 
maiya22 profile image
Maiya • Edited

Thank you for really helpful tips. BUT you actually can put a CSS grid box inside of a CSS flexbox. There's nothing stopping you in the spec. The display: [grid or flex box] property of a div does not have any knowledge of the display property of its parent element.

Collapse
 
lmolivera profile image
Lucas Olivera

Gonna change that. Thank you! I was expecting someone to correct something, researching on the internet is complicated some times because everything is not always correct.

Collapse
 
maiya22 profile image
Maiya

Agreed. If we wait until we understand everything perfectly, we stop ourselves from sharing what we do know and can help other coders.

Thread Thread
 
lmolivera profile image
Lucas Olivera

Exactly, because we will never know everything there is to know in IT C:

Collapse
 
mjosborne1 profile image
Michael Osborne

I highly recommend the free tutorial by Wes Bos cssgrid.io/
It has a short section of flex + css-grid, but it is simple to follow and includes css-grid cardio exercises where you get to flex (pardon the pun) your css-grid muscles.

Collapse
 
hashimwarren profile image
Hashim Warren

How do you handle responsiveness? I find myself using Flex for mobile and ditching grid

Collapse
 
lmolivera profile image
Lucas Olivera

Here is a collection of pens I made for the FreeCodeCamp curriculum. They are all for the "Responsive" certificate, so I suggest you check them and see how CSS makes the pages responsive (just understand I made them some months ago and some are REALLY ugly, I'm working on redesigning them).

If you still have problems I'll make a tutorial C:

Collapse
 
jm3 profile image
John Manoogian III • Edited

Did you end up making that responsive tutorial you were thinking about? If not, you should — I think folks would find it valuable! :)

Thread Thread
 
lmolivera profile image
Lucas Olivera

At the moment I'm correcting a draft for a book and writing an article about NoSQL databases. But I promise I will make it sooner or later ;)

Thread Thread
 
jm3 profile image
John Manoogian III

Fair enough!

Collapse
 
dan503 profile image
Daniel Tonon

And don't forget the CSS Grid in IE series for learning how to support CSS Grid in IE.

css-tricks.com/css-grid-in-ie-debu...

Collapse
 
dance2die profile image
Sung M. Kim

ah yes! 😀
I still need support IE for intranet sites and this looks great~ 👍

Collapse
 
lmolivera profile image
Lucas Olivera

Wasn't aware of this. Thank you very much! I'll add it to the post right now.

Collapse
 
dan503 profile image
Daniel Tonon

Thanks for adding it to the article. On a side note, take a look at who the author of the article series is 😉

Collapse
 
kaury1405 profile image
Kaury Rosario • Edited

Thank you very much for this post Lucas, it helped me a lot.<3

Collapse
 
lmolivera profile image
Lucas Olivera

Thank you for reading <3