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."
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!).
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)
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 2Dwas a great insight 😮I can find myself telling others about it 🙂
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.
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:
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.
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 ;)
Fair enough!
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...
ah yes! 😀
I still need support IE for intranet sites and this looks great~ 👍
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 😉
Thank you very much for this post Lucas, it helped me a lot.<3
Thank you for reading <3