Flexbox or grid - How to decide?

Flexbox and grid are two fantastic layout tools. It can be hard to know which one to pick, but when you focus on the strengths of each one, it becomes a lot easier.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:13 - Comparing their behaviors
09:54 - When you should use flexbox
13:40 - When you should use grid
17:23 - Mixing flexbox and grid

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[GokuMediaa]

If we want a FLEXIBLE layout (the layout adapts to fit the content), we use flex.
If we want a more fixed layout (the content adapts to fit the layout), we use grid.

[jackfrosch]

As a mostly backend developer, every time I have to use CSS, it feels like I'm starting over. Your videos are my go-to resource to refresh and add to my CSS understanding.

[perkin]

You have made quite a few videos recently on flexbox and grid but I find the repetition enormously helpful. The basic principles are getting hammered in and I find I can now use them much more confidently. Keep on going and thank you!

[ShariLynnSmith]

Kevin, thank you for showing each of these as you did. I believe I now have a much better understanding of what each is good for in a way I never have & I've tried. Thank you!

[milos]

This is probably the best summary of Flex vs Grid, the pros and cons and how they can work together. Great job!

[Detonatr]

I prefer to use grid for the whole page layout, while flex for smaller scale things as you showed in the last example.

[zachjensz]

Obviously floats are the best layout tool

[batuhanbatur]

the way you explain things is great man. as a person who gets distracted by the simpliest things, i can watch your videos without losing my focus for hours. much appreciated.

[Gocks]

It's not very often I find one simple, concise video that answers the exact questions I have. Thank you!

[lamthaotran]

I'm binge-watching your videos to teach myself CSS during my 30-min breaks at work. Thanks a ton.

[AdamLeis]

Great video, Kevin. I like the benchmark of asking what determines the column widths: items or parent. That's a helpful way to conceptualize when to choose either. Bravo 👏

[weshorrocks]

I’m so glad I watched this. I’ve been trying to figure out a problem on a site where a list of logos wasn’t working as I expected. Finally got it to work thanks to the mention of grid children and a flex/grid combo.

[hugefriend]

This video came to me exactly while i was struggling to learn the differences between flexbox and grid, and explained that everything so clearly. Thank you for this amazing content.

[aydanwessels]

That was an awesome tutorial! I love the energy you bring to helping me learn these concepts. Thanks so much!

[terryg]

Thank you so much for these videos. This is the first time I've explored using flex for something, so this is invaluable.

[marcelijankowski]

I tend to use grid for overall layout of the web page or for larger components.
While Flexbox often helps me with Individual components, basically I use it on the smaller scale.

[vibonacci]

My rule: if I can't achieve it easily with flex, I'll pivot to grid. Flex is the go-to choice. But I have to admit that I have less experience with grid than with flex, so that definitely plays a role in the decision. And simply by the amount of choices you have, you can conclude that grid is quite a bit more complex.

[floverdevel]

Wow ! Thank you Kevin :)
This video is great. It's so well explained. You really helped me understand the differences between Grid and Flexbox.

[Niksorus]

This is the most useful video about CSS I've ever watched! Thank you so much, Kevin :D

[arnaud_b]

Really great content! Coming from software then backend, all too often i have felt like CSS is a nightmare. In only 20min you just gave me the explanations i needed to fix my layout (i switched from grid to flex) and now it looks great and it is responsive. Keep doing what you do. Big thanksss!