CSS Grid vs Flexbox

Подписаться 912 тыс.

Просмотров 246 тыс.

50% 1

CSS Grid or Flexbox, which one should you use? Can you use CSS Grid and Flexbox together? Learn how to use both technologies correctly and how combining them can lead to even better results than when choosing between Grid and Flexbox.
----------
Dive into our "CSS - The Complete Guide" course: acad.link/css
Find the article to this video on: academind.com/learn/css/css-g...
Starting Code: github.com/academind/css-grid...
Finished Code: github.com/academind/css-grid...
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Наука

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 282

@Oli-bm1ee 3 года назад

This! This guy deserves a medal! I literally have a template now, where I can apply all my other learning and it all make sense! Absolutely amazing that this is free and in a little over 10 minutes you've blown my mind! Thank you so much! :)

@Skyflairl2p Год назад

Im a student of front end development and have been banging my head over something i knew was simple, yet couldn't wrap my head around for about two weeks straight now. All the other tutorials ive seen have just been comparing the two, when using them together makes just far.. FAR more sense. You've just saved me a headache and a half, I was able to sort out my design properly now. Thank you!

@ruppelllost7546 4 года назад

Your explanation was just perfect, I was so confused as to what CSS grid and CSS flexbox were before. Thanks a lot!!

@prakashupadhyay9529 4 года назад

It was your video on ReactJS back in 2018..that I picked-up front-end (reactjs) and now it's all I do as a Full-Stack dev.. you're incredible at engaging the students. Thanks a lot for everything you share! :)

@cyonii8683 3 года назад

For the first time after so many attempts, I have finally got it. You're always the man, thank you.

@easazade 4 года назад

every time i watch your comparison videos, i think . wow no one else could put it like that. keep up the great work

@academind 4 года назад

Happy to read that Alireza, thanks a lot!

@pedroelton7040 3 года назад

The very best tutorial I’ve seen so far. Finally I understood it perfectly! Tks!!!

@AliBaba-hn8tv 4 года назад

I love your take on this subject, you solved my problem and saved me time. Thank you.

@RajPhotoEditingMuchMore 3 года назад

Thanks a lot sir 🙂🙏🙏

@deepthis4956 3 года назад

Thank you! I really needed this video to decrypt the grid layout.

@mariom4173 Год назад

This video was very helpful. It helped me to understand better the use of Grid/Flexbox. I'm sure I'll be watching it again and again when needed.

@jcribbs5819 Год назад

This is the best explanation of grid and flex that I have found omg.. Like the dude said below it's a template. my mind is blown too. I had never even heard of grid-area. wow.. Thank you so much. You'll be seeing me in your CSS class. I went through this really slow and made my own html and css file for future reference. This really is a game changer. I was so confused until I saw this video.

@nehoha 2 года назад

This is an awesome simple explanation of how it works! Thanks, man!

@justdoodleit311 3 года назад

wow!! short and crisp to the point thanks a lot

@cswalker21 3 года назад

Wow. I'm really glad I watched this video. I had this idea in my mind you pick one or the other. It makes sense to use each one for things it is good at. Thanks!

@daguttt 3 года назад

The video i was looking for. Perfect! Nice explanation. Thank you so much!

@kavithakesavan8938 2 года назад

The moment I see the video from "Academind ", I knew this is where my search ends . Max a great instructor online . Short and Clarity Content delivery .Thank You Max :)

@sougataghar1179 4 года назад

i learned grid 1st , thank you so much . I will now use both from now on.

@pranit_7D 3 года назад

I love the video. Made it seem so much simpler. Keep up the good work.

@michelbilliau3760 3 года назад

I'm very new to this but this is a great video ! It explains the difference very well ! Well done !

@Andrey-il8rh 6 лет назад

Sometimes I think you are reading my mind! A question bumps in my head and in 30 minutes I receive a video answer from Max, this is fantastic! :)

@academind 6 лет назад

Haha, that's so cool to read, always happy to create videos which make you guys happy :)

@BlueyMcPhluey 4 года назад

I like how the worked example showed the strengths of both very clearly and succinctly

@yldrmhakansavc8971 2 года назад

That was a very good way to teach that! Simple but full of information!

@sm810403 4 года назад

thank you! I will use Grid for general layout and flexbox for detail, then.

@thewu32 3 года назад

Waow!!! That's the best tutorial I ever seen about the famous Grid vs Flex topic!!! Very well explained! Thx a lot.

@zakaria1859 4 года назад

This video was really helpful for me, thank you, now i understand.

@wildelyssa 4 года назад

I'm just learning both and wondering what the difference was between them, this is a great explanation. Thanks!

@ijustdey 3 года назад

I’m about to start learning, which is better?

@monair3263 3 года назад

@@ijustdey U should learn both

@XlON___ 3 года назад

Were you able to learn anything after one year?

@lysaunku-jones8587 3 года назад

Definitely learn both. They are both useful for different things, and different types of layouts. Learning how to use them together will open up a lot of possibilities. Hope your learning is going well!

@lysaunku-jones8587 3 года назад

At the time, I mainly was getting confused choosing the best one for different situations. The video made that very clear for me. I find css tricks cheat sheets a useful link. I still check them now and again as a refresher. css-tricks.com/snippets/css/a-guide-to-flexbox/ css-tricks.com/snippets/css/complete-guide-grid/

@user-lm7kg8br4m 4 года назад

Didn't expect that an English video can make me understand well like this :)

@PrecizionHunting 4 года назад

Nice explanation! Helped a lot and actually answered questions I had that I did not think would be answered in this video. Keep it up!

@academind 4 года назад

Happy to read that, thank you!

@randychoc7 4 года назад

First video of the list... and perfect 👨🏻‍💻👍🏻

@bryannchude4559 3 года назад

Thanks man. Your explanation has been really helpful.

@jakemurdock5376 2 года назад

Loved this! This really helped me! Thank you :D

@niggalascage666 4 года назад

thank you for this max, very enlightening!

@barklegneeshetu8048 4 года назад

This is what I needed, thanks Max

@kallege01 2 года назад

thanx bro i took this up on myself and i'm going crazy... but this makes me get a little better understanding of why things are always all over the place on my webpages...

@Pareshbpatel 2 года назад

Very useful and clear tutorial on CSS-Grid and Flexbox usage. Thank you. {2022-01-03}

@abbyck 4 года назад

Max! After all these years, I still couldn't find some other person other than you, who can explain things like this.

@academind 4 года назад

Wow that is so great to read Abhinav, thank you very much for your support!

@turkey8042 Год назад

Great explanation! Thanks for the vid!

@marcosandoval7260 5 лет назад

Wow. Excellent video as always. Easy to understand the core ideas and fully practical. Thanks Max.

@academind 5 лет назад

Thank you Marco :)

@itsm3dud39 3 года назад

Im going to learn grid and flexbox and this is a warm up video for me. Nice

@amburt7x 4 года назад

Thank you, this is helpful

@samuelsantana2109 3 года назад

Great explanation i perfectly understood it. Thanks u so much

@sarthaksj1999 3 года назад

Absolutely phenomenal video. Great Work Buddy....

@sauliustb 3 года назад

thank you sooo much. I was thinking on how to achieve my layout, and had it almost completely done in flexbox. Then I changed something and my headers didn't align anymore. Now I'm going to see if I can do the main layout in grid first, and some finetuning with flexbox. should save me a whole lot on actual CSS code to go through.

@starkxz 4 года назад

Awesome tutorial. Thanks

@p_o_z_e 4 года назад

Helped me alot, thx!

@reristavi 6 лет назад

I was actually working on it last 2 days now. Yeah combining them together makes so much more sense. In fact I have to admit that building my own CSS styles makes my life so much easier then Bootstrap and other frameworks. Thanks for a nice Video.

@academind 6 лет назад

Thanks for the nice feedback, I'm glad you liked it!

@123kingvlad 5 лет назад

is it okay for a beginner to learn both at the same time? I now know the box model and have watched already the CSS flex box from Academind here in YT but I still need to practice it more

@digigoliath 4 года назад

Great stuff & very well explained even for a newbie. Totally enjoyed the video. Thank you very much!!

@academind 4 года назад

Thank YOU for your awesome feedback!

@tebogoikaneng727 3 года назад

much appreciated... I've been looking for this knowledge....

@pratikswvk 4 года назад

Awesome Max, you are the best teacher in the whole world😊 Hope you and your family is safe😊

@ramiechaarani6947 2 года назад

This video is amazingly helpful

@petrrataj232 4 года назад

Great explanation, thanks.

@nikkotolentino553 3 года назад

This enlightens me. Thanks for this wonderful video :)

@wojciechjarosz420 4 года назад

Amazing job guys!!!

@Glebtc 4 года назад

nice summary, thank you

@deepdive1338 3 года назад

Other useful properties with flex, position-items(set it to center for vertical and horizontal centering, and justify-wrap:wrap which will add some foundational responsiveness like wrapping to next line when run out of space

@axelblaze3361 5 лет назад

I always confuse in flexbox and grids but after watching your video all my doubts are clear.

@Alt-wx6ry 4 года назад

Nice explained, thanks for the video :)

@Ben-ui5sc 6 лет назад

wow, that was the perfect explanation to the googled question of grid or flexbox -- combination it is, cool! thanks, subbed.

@academind 6 лет назад

Thank YOU so much Ben - welcome on board of the channel :)

@JoaoFerreirajf 2 года назад

Great video, really really helpfull. Thank you so much

@africainwolf7342 3 года назад

This was so helpful, Thanks

@DaggieBlanqx 3 года назад

Wow! great explanation .

@user-se3tf7cb8t 3 года назад

You saved my life!! Thank you!!!

@madarafayssal 3 года назад

hello sir thanks for you cours and languge it's help me to understand what is grid and how it's work

@taukirahmed9714 2 года назад

thanks for this super helpful video

@samir105yt 5 лет назад

The best simple explanation!

@liamik9986 5 лет назад

agree! super explanation

@omikaayush 4 года назад

U r really awesome ..... its going so smooth that I did not hv to make much effort to understand:)

@academind 4 года назад

Thanks a lot 😊

@fbenfrank 3 года назад

Great explanation!!!! Cheers!!!!

@krnkoravi 3 года назад

Grid template area is most magical thing I have seen in CSS

@croxstudioz 4 года назад

What an amazing explainer!!!!!

@maskman4821 6 лет назад

This is a fantastic intro course on css grid and flexbox!!!

@academind 6 лет назад

Thank you so much!

@hleet 4 года назад

superb example, as always, the best

@luismunoz9126 3 года назад

this is the best tutorial ever.... simple and powerfull

@dean6046 5 лет назад

Thank you Max. Well said and well explained!

@academind 5 лет назад

Happy to read that, thank you!

@achillesarmendariz9335 4 года назад

really nice. enjoyed this video

@mahdouch_Mahdi_FCB 2 года назад

Thank you very much

@alokranjan476 4 года назад

Thanks Very well explained the difference Max. Please keep posting such informative contents.

@academind 4 года назад

Happy to read that you like it Alok, I'll do my best to keep it going :)

@DUANEYAISER 6 лет назад

I was in the middle of watching your other Flexbox/Grid videos when this popped up. Stop producing for a week or two, I CAN'T KEEP UP! :-)

@academind 6 лет назад

Sorry Duane, there are just so many interesting topics to cover :D

@quamar0313 5 лет назад

Thanks

@nobleinexile4296 4 года назад

Good video, thanks!

@guideandmercy 2 года назад

Thank you

@drewstifler1440 4 года назад

Thanks much!

@CVNOR-nt9pi 3 года назад

excellent tutorial!

@LuLu-fo9ul 2 года назад

Damn.....such a cool vid, thanks!

@tonymora8586 3 года назад

Great video I hope someone can answer this question, how could I put the footer at the bottom of the page?

@muhdbasiirzulkifle5090 2 года назад

Great sharing!

@AlejandroLopez-tb4un 4 года назад

Hello teacher, great explanation. I have a question: nowadays with Flexbox and Grid, is there any case where i need to use float? Thank you

@romualdomariano1457 3 года назад

Yep. This is not recommended. I really search for this. Nice video. Intuitive 💯

@iamdanyaal 2 года назад

Thank You Sir

@TropicalTaquito 6 лет назад

Taking your CSS course on udemy and I’m on the CSS grid section and I enjoy it a lot more than flex box. I find it straight forward, especially with the grid-template-areas property.

@academind 6 лет назад

Great to have you on board of the course, thank you for your support! I also like the Grid a lot, but I think that knowing both Flexbox and Grid can be quite helpful, especially in situations where we combine both :)

@Toulkun 6 лет назад

Tropical Taquito Exactly, the more i use css grid more i love it. But i use flex for inner elements sometimes.

@Agustin-jo8mv 4 года назад

wow very useful thank you so much!

@mushfikf.rahman9700 3 года назад

Really helpful for beginners like me

@oerbyy 5 лет назад

Short & clear! Thanks! 8)

@academind 5 лет назад

Thanks a lot Vladimir :)

@saeedjalali7339 2 года назад

i mean whenever i wanna learn something new in front-end i just add Academind at the end of the subject in search box and boom ! 20 minutes later it's done.

@mansaha9288 4 года назад

I wish you could show the example of “overkill” you mentioned about using grid in one-dimentional situation where flexbox is more appropriate.

@gkathmandu 3 года назад

this is one of v important advance css practical lesson. Be careful on is part('grid-area:main;') as its not mentioned in video, there is not quotation marks for 'main' which we are used to. Im saying becoz , ive spend 2hrs in this thinking what got wrong.