Hi All. Hope you learn a lot in our new comprehensive video on CSS Grid Layout! See the grid used in the responsive layout: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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?
'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!
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!
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?
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.
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.)
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!
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 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!
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.
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.
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!)
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?
