CSS Grid vs Flexbox

[@Oli-bm1ee]

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!

[@astrodians]

i like it when they explain it with a common usecase in the real projects. It's easier to see what's the usage of something really is with little to no misunderstanding.

[@easazade]

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

[@academind]

Happy to read that Alireza, thanks a lot!

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

[@wildelyssa]

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

[@ijustdey]

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

[@monair3263]

@@ijustdey U should learn both

[@XlON___]

Were you able to learn anything after one year?

[@lysaunku-jones8587]

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]

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/

[@sm810403]

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

[@abbyck]

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

[@academind]

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

[@Andrey-il8rh]

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]

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

[@ruppelllost7546]

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

[@prakashupadhyay9529]

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! :)

[@蝦子-n6u]

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

[@kavithakesavan8938]

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 :)

[@pedroelton7040]

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

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

[@BlueyMcPhluey]

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

[@saeedjalali7339]

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.

[@Pareshbpatel]

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

[@RajPhotoEditingMuchMore]

Thanks a lot sir 🙂🙏🙏

[@cyonii8683]

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

[@kallege01]

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

[@deepdive1338]

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

[@TropicalTaquito]

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]

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]

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

[@reristavi]

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]

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

[@123kingvlad]

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

[@azrailnone]

I have created a footer and inside there I have a div class with 2 divs ( icons with my icons 4 of them in total and a div class=copy with a copyright in it ) I added a dsiplay:flex to my div container which includes the above two divs but I cannot seem to get how to position my icons in the middle and my copyright at the end of my footer.

[@thewu32]

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

[@AliBaba-hn8tv]

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

[@tonymora8586]

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

[@krnkoravi]

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

[@deepthis4956]

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

[@PrecizionHunting]

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]

Happy to read that, thank you!

[@sauliustb]

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.

[@cswalker21]

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!

[@pratikswvk]

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

[@nehoha]

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

[@marcosandoval7260]

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

[@academind]

Thank you Marco :)

[@daguttt]

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

[@justdoodleit311]

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

[@gkathmandu]

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.

[@samir105yt]

The best simple explanation!

[@liamik9986]

agree! super explanation

[@randychoc7]

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

[@yldrmhakansavc8971]

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

[@KuldeepKumar-qc6fz]

We no need to use margin with flex and grid because there is a way to make spacing using column-gap: 1em; and same for the row spacing column-row: 1rem;

[@itsm3dud39]

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

[@jkli14]

how do I get the footer to go at the bottom of the page ?

[@pranit_7D]

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

[@michelbilliau3760]

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

[@axelblaze3361]

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

[@converter]

I was like .. what's "jabber"??? oh, "each other!"

[@BenHayat]

He DID say jabber several times... :-)

[@stolensentience]

I’m glad you noticed each jabber

[@sougataghar1179]

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

[@azrailnone]

How can I apply different positioning at more than 1 element inside a grid area with flex display on it, for example I have a footer and inside I want my icons be in the midldle but my copyright be at then far right??

[@xstanley999]

can pure css 3 replace other library such as bootstrap only for grid layouts ? although I think I will still use Bootstrap Components such as Button or alert to combine it

[@Ben-ui5sc]

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

[@academind]

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

[@WateryIce54321]

What's something Flexbox can do that Grid (reasonably) can't? There's also power in having a few well-defined tools.

[@romualdomariano1457]

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

[@DUANEYAISER]

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]

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

[@maskman4821]

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

[@academind]

Thank you so much!

[@TenshiProductionz]

What if i just nest another grid into a grid to achieve the result of a flexbox by just changing the default grid flow. That eliminates the reason to use flex. Is that considered a good practice ?

[@asefhosseini3007]

why don't you use `gap` property for adding space between items?

[@omikaayush]

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

[@academind]

Thanks a lot 😊

[@madarafayssal]

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

[@bryannchude4559]

Thanks man. Your explanation has been really helpful.

[@zakaria1859]

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

[@liewweijun6728]

Why should we used flex box instead of using float property?

[@sarthaksj1999]

Absolutely phenomenal video. Great Work Buddy....

[@haroldmcbroom7807]

What program are you using in this video to write your code?

[@digigoliath]

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

[@academind]

Thank YOU for your awesome feedback!

[@yitzchalfari2426]

Do div wrappers mess things up? For some reason the align-items:center; is not working I had to manually set a margin-top but its just not right.

[@peviz3003]

what if: use flexbox as a rows and each item of that flexbox to be another flexbox for columns?

[@aznanramin972]

Unbeleivable Lecture,GOD BLESS YOU.MD.CHOWDHURY,Bangladesh.

[@alokranjan476]

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

[@academind]

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

[@JohnMervinancheta]

If I use display:inline it is just ok?

[@jakemurdock5376]

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

[@jaleele7168]

so for general layout use grid and for specific changes uses flexbox on the elements in the grid ?

[@samuelsantana2109]

Great explanation i perfectly understood it. Thanks u so much

[@steffen_storck]

a big point is, that internet explorer does not support css grid. and many big companies still use it as default browsers (yes, the number is declining. but still...), so by using grid, the hompeage might look like crap in many many many browsers :-)

[@academind]

That is absolutely true, browser support is something you have to check when using the Grid.

[@turkey8042]

Great explanation! Thanks for the vid!

[@barklegneeshetu8048]

This is what I needed, thanks Max

[@tebogoikaneng727]

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

[@FirebrandVOCALS]

Do these replace HTML tables?

[@luismunoz9126]

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

[@ramiechaarani6947]

This video is amazingly helpful

[@vaibhavm1986]

Always fun and simple explanation, so easy to quickly understand, thanks a lot Only obstacle at the moment with grid is IE :( wish IE should not exist anymore

[@academind]

Thank you very much for your comment Vaibhav. Yes, browser compatibility with the IE is not perfect yet, let's see if it gets better in the future.

[@SlowparSheena]

Wow. So you just broke that down in this short video more plainly than another training course that I paid for...LOL!!!

[@academind]

Happy to read that the video was that helpful for you, thanks a lot :)

[@jozefrzadkosz5945]

Flex-direction: row is set by default ;)

[@wojciechjarosz420]

Amazing job guys!!!

[@mushfikf.rahman9700]

Really helpful for beginners like me

[@amburt7x]

Thank you, this is helpful

[@nikkotolentino553]

This enlightens me. Thanks for this wonderful video :)

[@mansaha9288]

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

[@Alt-wx6ry]

Nice explained, thanks for the video :)

[@juanluistorres1559]

Is it a case when u have to use both, css grid and flexbox? Or can u do that? Sorry, I'm learning web development haha

[@AliBaba-hn8tv]

Yes, it makes life easy to use both flexbox and css-grid plus the outcome is always perfect for both you and your client.

[@eswar9255]

you got a new subscriber. Congrats that's me ✨🎉🎇🎇🎆

[@DaggieBlanqx]

Wow! great explanation .

[@LethalDamageGaming]

amazing, you helped me understand a few things. Also, no one in this world say "each other" like you do =)

[@academind]

That's just great to read, thanks a lot for your comment!

[@Andrey-il8rh]

grid-area syntax feels very odd to me, is there any alternative to avoid it?

[@academind]

Yes, there is - you can assign elements to cells which you define via starting and ending lines (for rows and columns). But I personally like the grid-area syntax a lot. Being able to name things makes the code way easier to understand in my opinion.

[@sureshmakwana8709]

Wow so useful 💯💯💯💯💯 thankyou!

[@africainwolf7342]

This was so helpful, Thanks

[@zlatkozeco7951]

Thanks, this was very helpful

[@JoaoFerreirajf]

Great video, really really helpfull. Thank you so much

[@adityanambiar6056]

Sir, towards the end of the video, we could use the justify-content property value "space-between" or "space-around" instead of using the margin property as you showed, right? Only difference would be that those items will be spaced out even more than just 10px as you used for the margin property if I can guess correctly.

[@JoEx2k11]

A few months late, and I suppose you already know the answer but for anyone else: yes, exactly like you say.