Hi All. Hope you learn a lot in our new comprehensive video on CSS Grid Layout! See the grid used in the responsive layout: ruclips.net/video/gH3sBOj6CGA/видео.html
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?
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)
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?
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!
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 !!
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.
'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!
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. :)
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?
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.)
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 !
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.
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!
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
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.
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?
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!
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!
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.
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?
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.
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.
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.
@StudentWebHosting.com can I download the slides from somewhere? will be very helpful as reference plus, Im just starting learning web design, and this Grid wow, totally makes it easier to learn now But Im finding it a bit hard to really learn on my own and really implementing and playing with it any recommendations? references to more hands on approach?
Hi All. Hope you learn a lot in our new comprehensive video on CSS Grid Layout! See the grid used in the responsive layout: ruclips.net/video/gH3sBOj6CGA/видео.html
that was an excellent explanation, what about nested grid ? grid inside grid is it possible ?
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?
Incredibly helpful!
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)
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?
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.
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!
I'm French and I think so too!
To be honest yes. I have seen countless tutorials and this guy is the best
iv’e
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!
Wow! Take care pops.
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.
Thank you so much, the best CSS Grid explanation video on RUclips
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 !!
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.
'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!
Outstanding presentation! The BEST I've seen on YT so far ...
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. :)
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?
So clear in 43 minutes. Don't need anything else. Thank you!
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.)
I’ve watched 5+ vids on grid, this is the best one, well done!
I agree :)
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 !
You're welcome!
thank you andrew for such a clear and comprehensive tutorial, please never stop what you're doinh
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.
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!
Of all CSS Grid tutorial videos I've seen so far this one is the best. Thank you for the neat presentation.
You're very welcome!
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
Wow you can teach elementary school & the kids would get your teaching that's how amazing you are!
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.
Forgot to say you deserve thousands of views on this.
It is the channel stayed underrated. Perfect presentation, I've learned many things. Thanks for all...
You're welcome Efe!
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?
Awesome. The best CSS grid tutorial on the web
This is the best CSS Grid explanation I have ever seen. Thank you so much @FollowAndrew, amazing work!!.
Thank you very much Andrew. You have explained it so simply and logically. You are a very good teacher. Thanks a Ton
Kudos for a very well structured tutorial. The best I've watched on youTube so far. Thank you.
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!
I second that.
I'm late to adopting grid in my workflow, I know... This is the best video I've found so far. Well done!
Thanks Nick
28:55 Combine Column & Row
CSS Grid the best thing I've seen in a while!!!
Like!
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!
I'm 100% be sure that this is _ The Best CSS Grid Tut _ on the web!!!!!
thanx so much!!!
I agree!!
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.
Great content. It helped me get done something i spent about a week trying to achieve.
Wonderful tutorial! Very intuitive!
Why does this channel only have 5k subs? Let's get this to 500k everyone !
Right!?!
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?
Thank you so much. This is explained absolutely wonderfully and makes grasping confusing concepts SO much easier!
You're welcome!
CSS Grid the best thing I've seen in a while!!!
Wow! I learned a lot about CSS grid in just 40 min. Great Explanation , thanks you so much.
I appreciate your visual animations, correlated to the code! That really makes understanding the concepts so much easier!
I guess it should be one of the best video for grid layout in CSS
It should.
This video helped me a lot! You deserv much more subscribers. Good Job!
OMG.. this is the best grid presentation.
Awesome tutorial. Thanks for taking the time to make it.
Excellent one and easily understandable. Thanks a lot.
Wow! Thank you so much Andrew, amazing content! I'm not used to comment on RUclips, but you deserved it, Congrats man!
Thanks Ton
this is very formative for an absolute beginner thank you 😊
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.
This is a brilliant tutorial !!!!!!
Thank you very much !!!
Thank you, after seeing many tutorials this one helped me the most.
You're welcome!
Fantastic explanation. Made it so much easier for me. Thank you so much!
Great to hear!
Finally, I understood it, thank you so much for making this.
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.
Thanks a lot for this excellent tutorial. It might be the best one to understand the css grid.
Your simply made my day with this explanations, thanks dude your one of the best in teaching this stuff. thanks A LOT!!
Glad to hear that!
thank you is very clear and very detail, im from argentina greetings!
Very well-done! Thanks for the details.
I really found this helpful, I'm loving this yt channel
Thank you, Andrew! Great channel you got there, I will stay tuned :)
I'm loving this... So much of information!!
Very well explained with the slides. Thanks.
i watched this like two times in its entirety. thank u sir
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!
The BEST Explanation Ever 😍
Thaaanx 🌹
Awesome tutorial! We need one for flexbox too!
Thank you very much for your presentation. It's very clear and helpful
Very good explained !
Thank you very much. This is very well explained. 👍👍👍
the best video I've found, thank you so much!
I agree! :)
Thanks! Amazing tutorial.
Really amazing Job really cool course
Great tutorial with great examples and explanations. Well done!
Hi Andrew very good video and content thks for this video.
Thanks for this video! I think it's a very very good job! Some paid courses are not of this quality!
Thank. Excellent. Exactly what I needed.
That's great quality content ! Thank you !
Outstanding content presentation skills!
Amazing breakdown, thanks for sharing!
Wow! Very clear and concise :) thank you
this is awesome, i learned so much
It's a Great Explanation. Thank You So Much Sir
You are most welcome
Excellent explanation! thanks so much
love your videos mate.. thank you
The grid-gap property is obsolete. You can archieve the effect applying a class to each element and using margin.
Very nice tutorial.
this is so informative, thanks man
Great video 👍🏻
Great tutorial .
amazing explaination
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.
Search for the "Responsive Web Design" tutorial on my channel, it's a full HTML & CSS website build
@@FollowAndrew Thank you.
subscribed cuz you are great at explaining
i now, know more on (CSS GRID). Thanks :)
Thank you! Tutorial was of great help!
Thank you!! for once I actually feel like I understand it!!
Yay!
thanks man this helped me alot.
thank you. very nice explanations
Excellent explanation. Thanks. :)
Simply revealing, Thx.
@StudentWebHosting.com can I download the slides from somewhere?
will be very helpful as reference
plus, Im just starting learning web design, and this Grid wow, totally makes it easier to learn now
But Im finding it a bit hard to really learn on my own and really implementing and playing with it
any recommendations? references to more hands on approach?
I have learned a lot, thank u so much
Glad you're learning Majed
Why didn't I know it earlier? Thank you!