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!).
Edit: I also made the same project with CSS Grid, you can check it out here.
Also check implementing CSS grid in Internet Explorer
Which one do you use the most?