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! :)
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!
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!
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/
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! :)
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.
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.
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
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 :)
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.
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 :)
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.
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
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...
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.
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!
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.
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.
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;
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??
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 ?
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 :-)
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
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! :)
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!
every time i watch your comparison videos, i think . wow no one else could put it like that. keep up the great work
Happy to read that Alireza, thanks a lot!
I'm just learning both and wondering what the difference was between them, this is a great explanation. Thanks!
I’m about to start learning, which is better?
@@ijustdey U should learn both
Were you able to learn anything after one year?
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!
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/
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! :)
Haha, that's so cool to read, always happy to create videos which make you guys happy :)
Max! After all these years, I still couldn't find some other person other than you, who can explain things like this.
Wow that is so great to read Abhinav, thank you very much for your support!
Your explanation was just perfect, I was so confused as to what CSS grid and CSS flexbox were before. Thanks a lot!!
Didn't expect that an English video can make me understand well like this :)
The very best tutorial I’ve seen so far. Finally I understood it perfectly! Tks!!!
thank you! I will use Grid for general layout and flexbox for detail, then.
I like how the worked example showed the strengths of both very clearly and succinctly
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! :)
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.
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.
Thanks for the nice feedback, I'm glad you liked it!
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
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 :)
Grid template area is most magical thing I have seen in CSS
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.
Thank you! I really needed this video to decrypt the grid layout.
For the first time after so many attempts, I have finally got it. You're always the man, thank you.
I love your take on this subject, you solved my problem and saved me time. Thank you.
Very useful and clear tutorial on CSS-Grid and Flexbox usage. Thank you.
{2022-01-03}
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.
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 :)
Tropical Taquito Exactly, the more i use css grid more i love it. But i use flex for inner elements sometimes.
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.
Thanks a lot sir 🙂🙏🙏
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
wow!! short and crisp to the point thanks a lot
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...
Great video
I hope someone can answer this question, how could I put the footer at the bottom of the page?
The best simple explanation!
agree! super explanation
Waow!!! That's the best tutorial I ever seen about the famous Grid vs Flex topic!!! Very well explained! Thx a lot.
The video i was looking for. Perfect!
Nice explanation. Thank you so much!
I was like .. what's "jabber"??? oh, "each other!"
He DID say jabber several times... :-)
I’m glad you noticed each jabber
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.
Awesome Max, you are the best teacher in the whole world😊 Hope you and your family is safe😊
This is an awesome simple explanation of how it works! Thanks, man!
I always confuse in flexbox and grids but after watching your video all my doubts are clear.
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!
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! :-)
Sorry Duane, there are just so many interesting topics to cover :D
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!
Happy to read that, thank you!
That was a very good way to teach that! Simple but full of information!
Wow. Excellent video as always. Easy to understand the core ideas and fully practical. Thanks Max.
Thank you Marco :)
This video was really helpful for me, thank you, now i understand.
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.
First video of the list... and perfect 👨🏻💻👍🏻
Im going to learn grid and flexbox and this is a warm up video for me. Nice
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.
U r really awesome ..... its going so smooth that I did not hv to make much effort to understand:)
Thanks a lot 😊
I love the video. Made it seem so much simpler. Keep up the good work.
i learned grid 1st , thank you so much . I will now use both from now on.
Thanks man. Your explanation has been really helpful.
I'm very new to this but this is a great video ! It explains the difference very well ! Well done !
Absolutely phenomenal video. Great Work Buddy....
Unbeleivable Lecture,GOD BLESS YOU.MD.CHOWDHURY,Bangladesh.
hello sir thanks for you cours and languge it's help me to understand what is grid and how it's work
This is a fantastic intro course on css grid and flexbox!!!
Thank you so much!
much appreciated... I've been looking for this knowledge....
This is what I needed, thanks Max
Yep. This is not recommended. I really search for this. Nice video. Intuitive 💯
Great stuff & very well explained even for a newbie. Totally enjoyed the video. Thank you very much!!
Thank YOU for your awesome feedback!
Thank you, this is helpful
Loved this! This really helped me! Thank you :D
Great explanation i perfectly understood it. Thanks u so much
This video is amazingly helpful
Really helpful for beginners like me
wow, that was the perfect explanation to the googled question of grid or flexbox -- combination it is, cool! thanks, subbed.
Thank YOU so much Ben - welcome on board of the channel :)
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;
Great explanation! Thanks for the vid!
I wish you could show the example of “overkill” you mentioned about using grid in one-dimentional situation where flexbox is more appropriate.
this is the best tutorial ever.... simple and powerfull
Thanks
Nice explained, thanks for the video :)
Wow. So you just broke that down in this short video more plainly than another training course that I paid for...LOL!!!
Happy to read that the video was that helpful for you, thanks a lot :)
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.
Wow! great explanation .
This enlightens me. Thanks for this wonderful video :)
This was so helpful, Thanks
What program are you using in this video to write your code?
Thanks
Very well explained the difference Max.
Please keep posting such informative contents.
Happy to read that you like it Alok, I'll do my best to keep it going :)
why don't you use `gap` property for adding space between items?
Thanks, this was very helpful
Max has a special way to get a point across.
You saved my life!! Thank you!!!
What's something Flexbox can do that Grid (reasonably) can't? There's also power in having a few well-defined tools.
Flex-direction: row is set by default ;)
Great video, really really helpfull. Thank you so much
Why should we used flex box instead of using float property?
nice summary, thank you
Damn.....such a cool vid, thanks!
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??
Amazing job guys!!!
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 ?
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 :-)
That is absolutely true, browser support is something you have to check when using the Grid.
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
you got a new subscriber. Congrats that's me ✨🎉🎇🎇🎆
superb example, as always, the best
thanks for this super helpful video
Short & clear! Thanks! 8)
Thanks a lot Vladimir :)
Helped me alot, thx!
Awesome video. Thanks Max
Thank YOU - great to see you're liking it!
Thank you Max. Well said and well explained!
Happy to read that, thank you!