Hi All. Hope you learn a lot in our new comprehensive video on CSS Grid Layout! See the grid used in the responsive layout: kzbin.info/www/bejne/nXmWpHWFn5t2faM
@hamodeyDooba6 жыл бұрын
that was an excellent explanation, what about nested grid ? grid inside grid is it possible ?
@guitarherozzz40093 жыл бұрын
Thanks man. So, may I ask, once you've finished your project using the grid, you still have to do media queries, right? The grid simply assists in the media query phase?
@taariqq3 жыл бұрын
Incredibly helpful!
@Myndrios5 жыл бұрын
Table of Contents: 0:24 - A Bit of History 4:16 - Browser Support 5:08 - Grid Model 8:10 - Grid-Template-Columns 9:16 - New Unit of Mesurement 10:57 - minmax() / max-content 12:31 - repeat() 14:00 - Repeat: auto-fill 15:46 - Grid-Auto-Rows 18:21 - Grid-Auto-Flow 20:15 - Grid-Gap 21:07 - Grid-Lines 26:55 - Grid-Line-Names 31:18 - Grid Template "Auto" 32:43 - Grid-Template-Areas 35:57 - Grid-Template-Areas "Auto" 38:13 - Responsive Grid Areas 40:31 - Empty Grid Cell 41:25 - Justify & Align (I did this for me, but its a nice bonus that everyone else can use it here too)
@guitarherozzz40093 жыл бұрын
Thanks man. So, may I ask, once you've finished your project using the grid, you still have to do media queries, right? The grid simply assists in the media query phase?
@dougui204 жыл бұрын
you know the tutorial is good when you stop in the beginning to comment and say how good it is, thank you my friend for such great tutorial.
@danielbennett11924 жыл бұрын
Insane amount of content in 40 mins. This is probably the best guide to grid iv'e found. Great format, looking forward to more in 2020!
@Cilloux9722 жыл бұрын
I'm French and I think so too!
@MadScientist_012 жыл бұрын
To be honest yes. I have seen countless tutorials and this guy is the best
@BunnyTwist Жыл бұрын
iv’e
@regbarnard28666 жыл бұрын
Thank you so much, the best CSS Grid explanation video on KZbin
@alexmartin46502 жыл бұрын
Andrew! As an 83 year old novice who as looked at many “crash courses” to help me rebuild my website using a “grid” system, this is the best I have seen. This video has now been bookmarked/ shared on to my PC so that I can quickly refer back to it as and when I need guidance! Your graphics( which I think are the reason I liked this video so much) we’re “ idiot proofed” which is the sort of thing that makes it so understandable to a novice (idiot) like me! Thank you very much now. I think I can get on with my rebuild!
@prashantmishra99859 ай бұрын
Wow! Take care pops.
@taariqq3 жыл бұрын
'That' was incredibly helpful. Somehow seeing the slides turned out to be better than 'having' to follow the presenter type the code as well. Maybe it is the attention deficit problem or something, but this was truly very helpful. Thank you!
@shahriaar04 жыл бұрын
The only video about grids that doesn't jump around on topics like a lost child. I recalled everything I needed to after a gap, thanks to this.
@bulldawg44984 жыл бұрын
Outstanding presentation! The BEST I've seen on YT so far ...
@FollowAndrew4 жыл бұрын
I agree, I think this is one of my best videos here. You know you've got a good one when you've re-watched your own video to re-learn something you forgot. :)
@guitarherozzz40093 жыл бұрын
So, may I ask, once you've finished your project using the grid, you still have to do media queries, right? The grid simply assists in the media query phase?
@itsjustanumber9545 жыл бұрын
This is an Amazing Tutorial. I was so afraid of all the terms and concepts in HTML & CSS. This has opened my eyes, and made me realize how important it is to learn Basic Concepts in any subject you're trying to learn. I'm going to watch this as often as it takes for me to fully understand and use CSS Grids!! Great Job !!
@shnam9284 жыл бұрын
I watched different tutorials last year, but I had this feeling that something was wrong! I could understand, but I couldn't use it properly & I didn't know why. The way you taught it is different & it answered my question! Thanks a lot.
@svanteljunggren2 жыл бұрын
I’ve watched 5+ vids on grid, this is the best one, well done!
@FollowAndrew2 жыл бұрын
I agree :)
@Cilloux9722 жыл бұрын
So clear in 43 minutes. Don't need anything else. Thank you!
@andrewliamdesigndevelopment3 жыл бұрын
Absolutely amazing presentation. Much more helpful than "hey guys, watch me code this, but not show you the Firefox grid, or really explain the properties and values." I had started learning Flexbox, but grid are SO much cooler. (And arguably more flexible, ironically.)
@ThirtySixOne5 жыл бұрын
very excellent video, i am in webdevelopment for years and always used float or display flex. your video explains very everything i needed to know and i understand imeadiatly how this whole display: grid; works and i can AND WILL from now on never use something else. great work buddy. thank you
@dandaly15704 жыл бұрын
This is an excellent presentation on CSS Grid. Very well thought-out with excellent visual presentation that supports the well articulated speaker. Would love to see him do HTML and JS presentations!
@industrialhomestead40282 жыл бұрын
I second that.
@nayinayi13 жыл бұрын
Wow you can teach elementary school & the kids would get your teaching that's how amazing you are!
@silkeschumann72615 жыл бұрын
Kudos for a very well structured tutorial. The best I've watched on youTube so far. Thank you.
@efesezenk4 жыл бұрын
It is the channel stayed underrated. Perfect presentation, I've learned many things. Thanks for all...
@FollowAndrew4 жыл бұрын
You're welcome Efe!
@guitarherozzz40093 жыл бұрын
So, may I ask, once you've finished your project using the grid, you still have to do media queries, right? The grid simply assists in the media query phase?
@alvarezgamers Жыл бұрын
As someone who’s only been coding for about two months. I haven’t heard someone explain in great but simple details the way you do. Good stuff. Sub here !
@FollowAndrew Жыл бұрын
You're welcome!
@MADPURO6 жыл бұрын
Maybe it’s because you released this just a month ago and a lot have already explained, but wow this was a gem of an explanation!! I saw the whole thing without losing focus or disinterested. I feel ready to play around confidently with the grid. Thank you so much man. Definitely will check out those links.
@MADPURO6 жыл бұрын
Forgot to say you deserve thousands of views on this.
@guzzlea1313 жыл бұрын
thank you andrew for such a clear and comprehensive tutorial, please never stop what you're doinh
@apollocabrera19175 жыл бұрын
CSS Grid the best thing I've seen in a while!!!
@sebc35462 жыл бұрын
This guy just gets it. Great teaching. Both the way he visually demonstrates and the way he speaks about the subject. It's clear he put time and effort into not just this tutorial but in his overall teaching skills.
@FollowAndrew2 жыл бұрын
Thanks Seb, Glad you recognize the 'off camera' work that goes into creating digestible content. I spend more time coming up with the 'teaching/learning' portion than I do with the actual videos!
@ProfGilRodrigues5 жыл бұрын
28:55 Combine Column & Row CSS Grid the best thing I've seen in a while!!! Like!
@nirmalsh13 жыл бұрын
Awesome. The best CSS grid tutorial on the web
@xerxius54464 жыл бұрын
Why does this channel only have 5k subs? Let's get this to 500k everyone !
@FollowAndrew4 жыл бұрын
Right!?!
@guitarherozzz40093 жыл бұрын
So, may I ask, once you've finished your project using the grid, you still have to do media queries, right? The grid simply assists in the media query phase?
@uiytresen3462 жыл бұрын
For the folks out there: grid-template-area works with css documents, but not within the style= value (inside the tag), because it closes the style= parent at the first ". I suppose it is a feature.
@nirmalsh13 жыл бұрын
Thank you very much Andrew. You have explained it so simply and logically. You are a very good teacher. Thanks a Ton
@abelmescua65694 жыл бұрын
This is the best CSS Grid explanation I have ever seen. Thank you so much @FollowAndrew, amazing work!!.
@effuseakay5 жыл бұрын
Andrew, your video was the best video about Grid! Seriously, you did a great job! Thank you so much for your help, I will share it with others that need help on the subject!
@matinsasan3 жыл бұрын
Of all CSS Grid tutorial videos I've seen so far this one is the best. Thank you for the neat presentation.
@FollowAndrew3 жыл бұрын
You're very welcome!
@shashankbc2284 Жыл бұрын
I guess it should be one of the best video for grid layout in CSS
@FollowAndrew11 ай бұрын
It should.
@goczbela84695 жыл бұрын
I'm 100% be sure that this is _ The Best CSS Grid Tut _ on the web!!!!! thanx so much!!!
@FollowAndrew5 жыл бұрын
I agree!!
@makimuramiki1484 ай бұрын
Wonderful tutorial! Very intuitive!
@jimaiello750 Жыл бұрын
Great content. It helped me get done something i spent about a week trying to achieve.
@NickHempsey4 жыл бұрын
I'm late to adopting grid in my workflow, I know... This is the best video I've found so far. Well done!
@FollowAndrew4 жыл бұрын
Thanks Nick
@bananacakes1144 жыл бұрын
Thank you so much. This is explained absolutely wonderfully and makes grasping confusing concepts SO much easier!
@FollowAndrew4 жыл бұрын
You're welcome!
@MrAverageViewer4 жыл бұрын
I appreciate your visual animations, correlated to the code! That really makes understanding the concepts so much easier!
@kaungmyatpaing133 жыл бұрын
Wow! I learned a lot about CSS grid in just 40 min. Great Explanation , thanks you so much.
@flyfiugaming23303 жыл бұрын
this is very formative for an absolute beginner thank you 😊
@vy90764 жыл бұрын
OMG.. this is the best grid presentation.
@stevehyuga9216 Жыл бұрын
Awesome tutorial. Thanks for taking the time to make it.
@prasathj7436 Жыл бұрын
Excellent one and easily understandable. Thanks a lot.
@acke51804 жыл бұрын
This video helped me a lot! You deserv much more subscribers. Good Job!
@maikwolfram Жыл бұрын
This is a brilliant tutorial !!!!!! Thank you very much !!!
@tonneto95234 жыл бұрын
Wow! Thank you so much Andrew, amazing content! I'm not used to comment on KZbin, but you deserved it, Congrats man!
@FollowAndrew4 жыл бұрын
Thanks Ton
@vickychivilcoyar Жыл бұрын
thank you is very clear and very detail, im from argentina greetings!
@industrialhomestead40282 жыл бұрын
Legendary content, Andrew! This is a super valuable resource and I'm greatful to you for the effort you put into it. I hope you get huge and can make a ton of these.
@electricwarrior274 жыл бұрын
Thank you, after seeing many tutorials this one helped me the most.
@FollowAndrew4 жыл бұрын
You're welcome!
@cmdaltctr3 жыл бұрын
Finally, I understood it, thank you so much for making this.
@quangle57013 жыл бұрын
Thanks a lot for this excellent tutorial. It might be the best one to understand the css grid.
@djordjek39163 жыл бұрын
Fantastic explanation. Made it so much easier for me. Thank you so much!
@FollowAndrew3 жыл бұрын
Great to hear!
@bkrsaleem84 жыл бұрын
Your simply made my day with this explanations, thanks dude your one of the best in teaching this stuff. thanks A LOT!!
@FollowAndrew4 жыл бұрын
Glad to hear that!
@ericnguyen74622 жыл бұрын
Thank you very much. This is very well explained. 👍👍👍
@Kyza-up2xb5 жыл бұрын
I really found this helpful, I'm loving this yt channel
@TH44455 жыл бұрын
Best explanation for using grid to herd cats. It will be much easier to place and locate cats with grid and yet the complexity of the process has still been maintained. Kudos to all contributors . I actually dropped my smart water at the 30: minute mark.
@simpleprogrammer58344 жыл бұрын
The BEST Explanation Ever 😍 Thaaanx 🌹
@avinashsorab50264 жыл бұрын
I'm loving this... So much of information!!
@jimhendrix57444 жыл бұрын
Very well-done! Thanks for the details.
@alex.zaslavskyi5 жыл бұрын
Thanks! Amazing tutorial.
@christopher67523 жыл бұрын
Really amazing Job really cool course
@RILCOMusic4 жыл бұрын
This was awesome man, very helpful. Im a few years behind obviously but Im gonna get better at using grid because of this video. Thanks again!
@jakeritz20324 жыл бұрын
Awesome tutorial! We need one for flexbox too!
@bhubryan5965 жыл бұрын
i watched this like two times in its entirety. thank u sir
@anklu4 жыл бұрын
Thank you, Andrew! Great channel you got there, I will stay tuned :)
@SAmir-wp5zj4 жыл бұрын
Very good explained !
@richardvankesteren70134 жыл бұрын
Very well explained with the slides. Thanks.
@sofianealloui3 жыл бұрын
It's a Great Explanation. Thank You So Much Sir
@FollowAndrew3 жыл бұрын
You are most welcome
@brendafosmire65194 жыл бұрын
Thank. Excellent. Exactly what I needed.
@mouhamedlaminengom18964 жыл бұрын
Thank you very much for your presentation. It's very clear and helpful
@dimitrietombosoa71044 жыл бұрын
Hi Andrew very good video and content thks for this video.
@saniks50704 жыл бұрын
The grid-gap property is obsolete. You can archieve the effect applying a class to each element and using margin.
4 жыл бұрын
Thanks for this video! I think it's a very very good job! Some paid courses are not of this quality!
@alenanik4 жыл бұрын
the best video I've found, thank you so much!
@FollowAndrew4 жыл бұрын
I agree! :)
@stahelpeter5 жыл бұрын
Great tutorial with great examples and explanations. Well done!
@rustworthy0111 Жыл бұрын
this is awesome, i learned so much
@annaboegh99102 жыл бұрын
Thank you!! for once I actually feel like I understand it!!
@FollowAndrew2 жыл бұрын
Yay!
@ajdrag3 жыл бұрын
Very nice tutorial.
@aqibsaeed2473 жыл бұрын
amazing explaination
@MTGpackopeners4 жыл бұрын
love your videos mate.. thank you
@nissimscialom37594 жыл бұрын
That's great quality content ! Thank you !
@lc11s4 жыл бұрын
Outstanding content presentation skills!
@Glow01104 жыл бұрын
Amazing breakdown, thanks for sharing!
@ronanm5052 жыл бұрын
The audio level is very low, I have to have my volume turned up high to hear you & it almost blows out my eardrums every time the ads come on! (But that aside, this was a very informative video & I learned a lot, so thanks!)
@peterkabiru51443 жыл бұрын
Great tutorial .
@MarkoKozlica5 жыл бұрын
Wow! Very clear and concise :) thank you
@trashbin21662 жыл бұрын
Awesome video, thanks a lot!
@jeronimoolivavelez12994 жыл бұрын
Excellent explanation! thanks so much
@mayurdas92854 жыл бұрын
thank you for explanation.
@salberg14 жыл бұрын
Thank you so much for making this video. You explain things so clearly. Please can you do a full website tutorial video step by step just HTML & CSS for those of us who just dont get javascript and want to create websites.
@FollowAndrew4 жыл бұрын
Search for the "Responsive Web Design" tutorial on my channel, it's a full HTML & CSS website build
@salberg14 жыл бұрын
@@FollowAndrew Thank you.
@vasilykulkov4 жыл бұрын
Why didn't I know it earlier? Thank you!
@jevonneshaw8617 Жыл бұрын
thanks man this helped me alot.
@swallowedinthesea116 жыл бұрын
Thank you! Tutorial was of great help!
@DAULISG4 жыл бұрын
Great video 👍🏻
@daryltiu67755 жыл бұрын
thank you. very nice explanations
@GerritforBazeja4 жыл бұрын
It's nice how simple the positioning is with Grid for the entire website. But how can I give each page its own positioning with Grid? Maybe a silly question. And I assume you can use it in combination with the old CSS 3 but better not in combination with flex ?
@FollowAndrew4 жыл бұрын
I usually use grid for the outer most areas, and flex box for the inner areas. But you are correct, if you have a completely different layout for all of your pages then using grid template areas doesn’t make much sense
@GerritforBazeja4 жыл бұрын
@@FollowAndrew So.... Grid makes most sense when you want your website with each page lined out the same way. Then it's a pro also for responsive development. In every Grid (block) you can workout with flex-box to keep also the inner-part in shape for responsiveness?