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.
"Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts."
- 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!).
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.
Also check implementing CSS grid in Internet Explorer
Which one do you use the most?
Thank you for reading. Don't forget to follow me on dev.to and Twitter!