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

[@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!

[@ELEV808]

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.

[@onr5196]

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

[@envatotuts]

Thanks for the love! 🎉 It's great to hear you're enjoying the tutorials. Stay tuned for more front-end goodness!

[@thomasmicciche4933]

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!

[@worldclasscode1847]

Great comment :) !

[@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.

[@mubafaw]

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

[@buzzardb]

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

[@envatotuts]

Glad it was helpful!

[@zeeshanmohy-ud-din2312]

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

[@envatotuts]

You're very welcome!

[@tonytony-fc6gq]

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

[@melindamuller5418]

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

[@artcancro2163]

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.

[@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!

[@Maria54762]

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

[@gabrielchukskelvin7953]

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

[@Kevin-im1gj]

Super nice tip for the responsive grid. Great video

[@muhammadazlaanzubair5426]

Best explaination till date....

[@iamjonas1025]

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

[@shriharikulkarni07]

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

[@envatotuts]

You are welcome

[@225fieldproduction9]

Love from India :)

[@daumtto]

Such Clear explanation!

[@tkopec125]

Great job!! This is what I was looking for :). Thank You!!!

[@Knards]

For the most part, if you know Flex, Grid is almost the same with the exception of how you place elements in design

[@fotoflo]

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

[@youtischia]

Lovely video. This comparison is very useful for us learning both approaches.

[@Guess_who08]

I love the way you explain it ❣️

[@iamdeadhacker1208]

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

[@VictoriaPeckham1]

exactly what i was looking for, with regards to how content affects grid and flex items! cheers

[@ajdrag]

Thanks Adi. Very nice presentation.

[@envatotuts]

Glad you liked it

[@afrojaaktar2210]

Totally agree with "Pain and suffering and eternal misery" 🤣

[@dibbyo456]

Finally someone knows their shit. 👌

[@ok.tanmay]

easy and great explanation for beginners ✌

[@StanLTU]

thanks for clearing this up.

[@Agustin-jo8mv]

Thank you for the video. :) I like the comparison and explanations.

[@adamherman5859]

amazing explanation, thank you!

[@envatotuts]

You're very welcome!

[@fragrantbloom]

Loved this video! Thanks a lot

[@worldclasscode1847]

Great comment :) !

[@aaron-kurz]

Beautifully explained, thank you!

[@envatotuts]

You're very welcome!

[@80Vikram]

You look like mafia guy with thick accent, tatoo etc LOL ( are you from east europe ? ) but you're a great teacher dude. Keep it up, god bless you.

[@robotics_and_stuff]

Great tute! Thanks a lot!

[@bane2256]

quality content, thanks

[@haciendadad]

Great comparison!

[@moromoro9268]

Great video!

[@alejandrodinardo4804]

Amazing video! Thank you, sir!

[@ioanniskritsotakis1228]

Great video! Very helpful!

[@01107345]

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.

[@tommyroche1654]

Thank you. Very clear explanation.

[@ashpakshaikh8715]

Great Sir,I am from india

[@SergeiDorogin]

amazing content, thank you!

[@habolajiibraheem7274]

Hear me out! You're appreciated!!

[@GauravKumar-ue7nz]

Thank you ❤️

[@RobHowdleMusic29]

"I don't really care about IE..." probably one of the most uttered phrases of a developer haha!

[@NickEnchev]

I prefer to place s inside table cells and layout my components that way.

[@Victor-zg1wn]

0:26 😅😂

[@mattsathrohan288]

@3:09 omg that's exactly what I thought 🤦🏾‍♂️

[@worldclasscode1847]

Great comment :) !

[@tuanaakyldz6509]

Tek Türk olarak da ben yorum yapiyim:). b1 seviyesindeki ingilizcemle çok iyi anladım

[@davinderrehal9391]

Floats used to cause me so much pain.... IE6 :)

[@rahilahmed2524]

flex grow horizontally and create columns Grid grow vertically and prefer to create rows

[@qazzy]

Is it still important to learn to create website layout using floats?

[@angelbear_og]

I would say yes, and I'll sum up why in two words: Legacy. Code.

[@tanamedia1]

Good

[@md.rashelmia8867]

wow!

[@johnm8358]

Tutorials mentioned aren't in description

[@envatotuts]

You have to click on the `Read More` in the description to see the link.

[@worldclasscode1847]

Use Flexbox :) !

[@Ctrl_Alt_Elite]

Unfortunately none of the tutorials mentioned are linked in the description 😢

[@envatotuts]

You can see the full description when you press the `Show More` text.

[@Ctrl_Alt_Elite]

@@envatotuts I'm aware, are the tutorials on KZbin or your website?

[@angelbear_og]

The people who gave thumbs down like pain, suffering, and eternal misery.

[@OfficiallAiHistory]

I prefer Grid

[@wu1686]

hi are you Zacky Vengeance?

[@mayonaiseking]

stop midrolls

[@AlThePal78]

LMAO pain and sufferings