CSS Grid vs Flexbox

Lucas Olivera on December 18, 2018

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 discove... [Read Full]
markdown guide
 

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

 

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!

 

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.

 

Thank you, Lucas.

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

 

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.

 

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.

 

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

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

 

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.

 

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

 

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:

 

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

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 ;)

 

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

 

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

 

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

 

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

 

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.

 

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

 
code of conduct - report abuse