Flexbox vs. CSS Grid: Which Should You Use and When?

Both Flexbox and CSS Grid allow web designers to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities, and many layouts can be solved with both. When to use which is another question, however. You'll discover the answer in this video.

00:00 Introduction
01:50 One dimension vs. two dimensions
08:59 When content shapes the layout (use Flexbox)
10:21 When layout shapes the content (use CSS Grid)
14:18 Box alignment
15:35 Browser support

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[godinezentokio]

I had such a hard time understanding which one to use and when, but, man, this video...you just made it the easiest thing on earth. Thanks!

[ELEV]

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.

[onr]

by far my favorite content creator when it comes to tutorials related with front-end development

[thomasmicciche]

Talking as a somebody which is learning Web Development from only 1 month.. your explanations method is incredibly effective! You clarified so much in such a short and pragmatic video!

[mubafaw]

Wow! Very objective with clear explanations and good example to support use case scenarios. Exactly what I was looking for. Thank you .

[largpack]

Flex-grow:1; doesn't mean all columns get the same width, only when you set flex-basis for all items in the container to 100%. (.container > * {flex-basis: 100%}. You may also have to set box-sizing to border-box as well if you use different margins, peddings or borders for the item as they affect the size as well.

[zeeshanmohy-ud-din]

The way you explain things makes it super easy to understand. Thanks for the video. It was very informative.

[tonytony-fcgq]

your way of teaching is clear, I really enjoyed your figma tutorial, thanks for your videos

[artcancro]

Thank you for teaching these layouts in an easy to understand way. I see opportunities to use both. Others make flexbox and grid so hard to understand but you've simplified it for us.

[buzzardb]

I am trying to brush up on modern css, I learned in floats era. This video was very helpful.

[melindamuller]

Thank you Adi, I feel I have a better understanding of when to use Flexbox and when to use CSS Grid!

[Kevin-imgj]

Super nice tip for the responsive grid. Great video

[fotoflo]

Hello thanks for the great overview. Where can we find the card layout tutorial mentioned at 8:20. Thanks!

[gabrielchukskelvin]

your teaching is amazing. thank you so much. Chuks from Nigeria

Hello, @12:12 you mention a video by Heydon Pickering and say that there's a link below, but I'm not seing in the description.

[randmvidss]

This cleared most of my doubts... Amazing video.. .Thanks

[JoeTheGetItGuy]

Man, this video is perfect! Love your voice, love the content, love the IE jokes...I just love this video, thanks for making it!

[Maria]

I think you can also use flex property (flex-grow, flex-shrink, and flex-basis) is much responsive and mobile-friendly and using flex together with media queries to create a different layout for different screen sizes/devices

[iamjonas]

Thank you, sir. It is helpful content. for sure I replay this video so that I pined on top of my browser.

[iamdeadhacker]

🔥🔥🔥🔥 I just loved the way you roasted people at the beginning ... Good explanation sir ❤️thanks a lot