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!
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.
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/
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.
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.
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 :)
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! :)
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
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 :)
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...
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.
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.
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;
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 :-)
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
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??
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
Im new with Flexbox and Grid, I always made my design in the old way using floats, I never used grid or flexbox before because i thought it will be hard, but men, your video explain it so good that now I will start using this properties on my designs and forget about positioning all with floats, line heights and margins. I just have one question, what's the software you use to code in this video? I use dreamweaver, but want to try something different, and that software looks nice
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!
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.
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/
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!
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 :)
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.
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.
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 :)
thank you! I will use Grid for general layout and flexbox for detail, then.
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 :)
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! :)
The very best tutorial I’ve seen so far. Finally I understood it perfectly! Tks!!!
I like how the worked example showed the strengths of both very clearly and succinctly
Very useful and clear tutorial on CSS-Grid and Flexbox usage. Thank you.
{2022-01-03}
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
For the first time after so many attempts, I have finally got it. You're always the man, thank you.
Thanks a lot sir 🙂🙏🙏
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.
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.
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...
Waow!!! That's the best tutorial I ever seen about the famous Grid vs Flex topic!!! Very well explained! Thx a lot.
I was like .. what's "jabber"??? oh, "each other!"
He DID say jabber several times... :-)
I’m glad you noticed each jabber
I love your take on this subject, you solved my problem and saved me time. Thank you.
Thank you! I really needed this video to decrypt the grid layout.
wow!! short and crisp to the point thanks a lot
The best simple explanation!
agree! super explanation
Awesome Max, you are the best teacher in the whole world😊 Hope you and your family is safe😊
I always confuse in flexbox and grids but after watching your video all my doubts are clear.
Great video
I hope someone can answer this question, how could I put the footer at the bottom of the page?
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!
This is an awesome simple explanation of how it works! Thanks, man!
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!
The video i was looking for. Perfect!
Nice explanation. Thank you so much!
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.
U r really awesome ..... its going so smooth that I did not hv to make much effort to understand:)
Thanks a lot 😊
First video of the list... and perfect 👨🏻💻👍🏻
Im going to learn grid and flexbox and this is a warm up video for me. Nice
Wow. Excellent video as always. Easy to understand the core ideas and fully practical. Thanks Max.
Thank you Marco :)
That was a very good way to teach that! Simple but full of information!
i learned grid 1st , thank you so much . I will now use both from now on.
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
I'm very new to this but this is a great video ! It explains the difference very well ! Well done !
hello sir thanks for you cours and languge it's help me to understand what is grid and how it's work
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.
Unbeleivable Lecture,GOD BLESS YOU.MD.CHOWDHURY,Bangladesh.
Yep. This is not recommended. I really search for this. Nice video. Intuitive 💯
I love the video. Made it seem so much simpler. Keep up the good work.
Absolutely phenomenal video. Great Work Buddy....
Thanks man. Your explanation has been really helpful.
This video was really helpful for me, thank you, now i understand.
This is a fantastic intro course on css grid and flexbox!!!
Thank you so much!
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
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.
Loved this! This really helped me! Thank you :D
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 :)
Great stuff & very well explained even for a newbie. Totally enjoyed the video. Thank you very much!!
Thank YOU for your awesome feedback!
Great explanation i perfectly understood it. Thanks u so much
This video is amazingly helpful
Great explanation! Thanks for the vid!
Really helpful for beginners like me
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 :)
This is what I needed, thanks Max
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;
much appreciated... I've been looking for this knowledge....
What's something Flexbox can do that Grid (reasonably) can't? There's also power in having a few well-defined tools.
you got a new subscriber. Congrats that's me ✨🎉🎇🎇🎆
This enlightens me. Thanks for this wonderful video :)
Thank you, this is helpful
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.
Wow! great explanation .
Nice explained, thanks for the video :)
how do I get the footer to go at the bottom of the page ?
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 :)
You saved my life!! Thank you!!!
Flex-direction: row is set by default ;)
This was so helpful, Thanks
Great video, really really helpfull. Thank you so much
amazing, you helped me understand a few things. Also, no one in this world say "each other" like you do =)
That's just great to read, thanks a lot for your comment!
Thanks, this was very helpful
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
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.
superb example, as always, the best
Amazing job guys!!!
Wow so useful 💯💯💯💯💯 thankyou!
Thanks
nice summary, thank you
thanks for this super helpful video
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??
Thank you Max. Well said and well explained!
Happy to read that, thank you!
You are an awesome teacher, thanks.
Thank you so much Orhan, it really means a lot to me to read that :)
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
why don't you use `gap` property for adding space between items?
Im new with Flexbox and Grid, I always made my design in the old way using floats, I never used grid or flexbox before because i thought it will be hard, but men, your video explain it so good that now I will start using this properties on my designs and forget about positioning all with floats, line heights and margins.
I just have one question, what's the software you use to code in this video? I use dreamweaver, but want to try something different, and that software looks nice
use Vscode it is the best for now
Max has a special way to get a point across.
so for general layout use grid and for specific changes uses flexbox on the elements in the grid ?
What program are you using in this video to write your code?