Why CSS grid-area is the best property for laying out content

in today's video we're looking at why grid areas are awesome and well it's because they are either my name is Kevin and here on my channel we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and as I just said we're going to be looking at grid areas this week but before I get to that a couple of really fast things on wenting up too much of your time but first off if you missed it on Monday so a couple days ago I put out a video announcing that the community has been opened to everyone so originally it was for patrons only but we decided to open it up to everyone and since then this is like 24 hours after that that I'm recording this and we're already over 200 people so that's really really cool and awesome and I'd love it if you could come join that party too so there is a link down in the description below you'll see it pretty early on in the description you just click that then you just have to give yourself a little username problem I guess if you're not already on discord and then you're in that's it super simple so over there we are there's already a lot of cool discussions going on you know ask questions just hanging out with other cool devs lots of fun stuff going on there so I've encouraged you to go and check it out and join us if you haven't already the other big thing I want to talk about in for this is more big for me we hit 50,000 subscribers here and I'm saying week is you know you're part of the 50,000 subscribers and it's awesome that's just crazy I could see it coming but I sort of lost track of it and I planned a 50k video and then I guess the community things sort of you know the opening up the community sort of axes my thank you for getting here but I do want to do the video still but I lost track of everything because I'm really kind of stressed out a little bit about what I'm gonna be talking about on Friday so you'll learn more about that when we get to Friday and that had me a bit distracted and I went off schedule a bit so there will be sort of a late thank you 50k video at one point coming up I'm not sure when I'll actually get around to it but it is on its way and sort of in production but enough of all of that you're here to learn about grid areas and why they're amazing so I've already done some videos on grid I've done a I had a handful of them I have a little series on it so you can check that out they're all grouped together and I have talked about grid areas before but grid areas when I first saw them like this is the coolest thing naming them this is amazing and then I'm like well it seems cool but then I'm writing all this extra code because I'm defining my columns and then finding my rows and then I have to name them and I didn't is I can just reference than line numbers his line numbers seem kind of weird but once you get used to line numbers they're not that bad you can have in some light names and overall I thought that was a lot easier to do but the more I've used grid and I haven't done a lot of videos focusing on grid specifically but I've continued to use it and the more I use it the more amazing grid areas come up especially when it comes to media queries I just make your life so easy and you actually have to write less code not more like it originally thought when it first started playing with them and I want to show you why I love them so much let's go and do just that so I am here in vs code to do this but I have put a link in the description of this video to a code pen that has everything it'll be the finished version of it that link is there for but you can come in and play around with it if you'd like and so what we're doing here is I have my content and what I pretty much want to do is place all of this on the grid so I'm gonna leave all this here at the top and then my demo more specific demo things I'm gonna come down here to do so right here on the body I can put on a display of grid if I hit save well now it's filling up the whole space that's just happening because I've set a min height of the body to 100 VH so it has to fill up the whole screen at a at a bare minimum and but when I do that everything is stretching to fit now part of this I'm assuming you do have some experience with grid already so I'm not going to go into too much detail and everything but I want to really explore why grid areas are the best so before we do that I'm gonna start with grid at template columns here so I must mean you know how these work so I'm gonna do a little layout like I often do so I do a min max here I'm just going to do something really simple for demo purposes we'll do a 650 for the large I'm gonna set up a another one here and that's just normally I wouldn't do this but just to keep make it a bit easier for you guys to see I'm gonna put this on a different line so we'll do another min Max of 200 pixels 350 and we'll put a 1.5 m all the way on the side there so let's hit save and see how that looks so you can see 1.5 then I have my 450 to 650 I have my 200 to 350 and then I'm a 1.5 over there on the end now that's not so bad and this is how I used to always work I like to ruin template columns I found them simple and I thought grid areas were a bit of a waste of time because now it's not very hard to do anything I can say I want my header and my footer to both be a grid column 1 over 4 and once I figured out line numbering and stuff I became super intuitive for me to use just the line numbers for everything so that my main content was a grid column of 2 3 or is a grade column of 2 3 will get it in the main area there we have the sidebar everything's sort of falling more or less where I want it to no sidebar can have its grid column of 3 4 and it's not working this should be 1 over 5 right there we go that's what I wanted that makes a bit more sense so 1 over 5 2 to 3 3 to 4 and then 1 to 5 and I get a little layout like that now obviously the heights and stuff are off a little bit but it gives you an idea of how I can build a layout and that works great in my opinion it's how I I'm used to doing things and it doesn't take very long to set up and taking the time to set up grid template areas well it takes a while to get this exact same thing I already have all of this set up but then I'd also have to come here and add a new line of grid template areas and then I can come and do my header header header header dot you know and if we can do it like that so it takes up all that side and then empty you don't have to do it with all these dots so it's taking a little bit longer to set up at footer order Twitter so you know this could be one dot it's a little simpler to set up but it sort of gives you a better idea of the layout so I could do something like that but then I'd have to come and also you know instead of I'm not replacing this but we are gonna end up with one extra line because each one of these so my grid area is now header and we'll fast forward while I do the rest of this all right there we go so I've accomplished the same thing that I just had but I had to take the extra time to set this up so that's why I'm beginning I wasn't really a big fan of doing it it seems like a lot of extra work for nothing except first of all it's a lot easier to understand what's going on if you were new to this project and you came across this this is so much easier to envision what the layout is actually gonna look like you know I don't have to look at this I can look at this and probably know roughly what the layouts gonna look like right away and that's just super handy and the real magic comes into play when you start needing media queries and we all need to have media queries right so if we go back to assigning grid columns you know if let's just I'm gonna copy everything I did here so I don't lose it but we're gonna go back we're gonna go back to this world right here where we have our grid columns now where this could be kind of annoying is you go oh well I I need to have media queries in here so I might need something that has you know this would probably be a lot simpler at the beginning so I might have just the 1.5 and in the middle here it 1fr or something like that so it sets up a one column sort of thing so then this would have to be a 1 3 1 4 2 3 1 this would also become a 2 3 so with small screens it's set up something like that and then I want to have to come in and do my media query media screen only and men with let's just say 860 and then we'd have to set everything else up in here again so we do so we'd say body and have our grid template columns and then I'd have to set up my grid template column so I'm not going to do all that right now but then it also have to come in and redefine all of this just like we had it before and you might have multiple media queries and every time you're redefining everything here and that's a bit of a nightmare and you're doing a lot of extra code for nothing because grid template areas let us do all of that so if we go back to having a like we'd you know I just took a step back here let me just format this a little better there we go okay so if we have it like this now if I want to have my media queries we can do it in a much simpler way so this I'm just gonna cut that out for now so here we can have our grid template columns and we'll do what I was just looking at 1fr 1.5 and then my grid template areas and I'm going to header header header whoops then I can do my dot and again I can do dot main dot just like that if I want to if you're really after saving so dot side dot and then my footer footer and if you wanted to leave it like that it's gonna work so let's it save foot or footer footer there we go and we fix that and you know if you prefer just because it makes it a little bit more visually friendly to look at you can have multiple dots across and it will work perfect though it doesn't do anything just don't give a grid area name a whole bunch of dots and add spaces whatever you want to make it a bit more obvious and you can see that's exactly what we're getting here so it's not a huge space it's just a little space but it yeah it's easy to look at and normally I won't do it like that though but for demos sometimes I like showing that you can because it can make thing a little prettier and a little easier to understand exactly what's happening there well let's go back like this because I think it is a bit more realistic to write it like that um so this is working fantastic it's nice but now I want to build in my media query all I have to do is do my at media screen only and min-width 860 pixels and now we can do our body has grid template I hope we can just actually paste in what we had before oh no we can't and I copied something else as so I can't paste it in but I had some just going to fast forward this really fast cuz we're going back to the grid that we just had all right there we go so now we have this setup here so I'm not having to redefine the line numbers or anything like that for this so that's really awesome so if I hit save it's working now this should be working except I'm silly and I wrote screen only instead of only screen which I tend to do a lot there we go so you can see that it is working the way in it was intended and we have our little mobile view here so we can see at our break point it switches from we have our this where the stacked one and then we get our columns just like that and if I ever needed to build in another one it's nice and easy to do I don't have to redefine anything with this stuff here is my header is always on my head or my main contents always on the main one other thing that's really cool also is if I'm keeping say I have my header across here if instead of saying grid area I actually say this is grid column but I do a header over a header and I hit save on that it it's actually still working and I think that's so cool so this can have certain times when it's kind of useful so I think that's really neat and if you want to explore why that's happening if we do a little inspect on one of these if we find it in here and if we look at the computed styles on it and I look at the grid let's find it you won't actually see in the computed styles you won't actually find a grid row now you won't actually find a grid area you're actually going to find that it sets it up as grid columns start and end and a grid row start and end and it's so the area is pretty much defining the the whole thing so I'm actually gonna go back to layout and I'm if you're using grid please use if you're developing grid please use Firefox because Firefox has this awesome overlay grid thing so you can see what you're doing so it's pretty much saying like this is you know you can see header header header header but what it's pretty much doing is saying here we're starting header and here is the end of the header so that's the column and then row is starting here and here so because of that you can set things up not only using the grid area but you can also use grid columns or good rows to position stuff and that can be used in sort you know unconventional ways sometimes but it's really helpful I find to know that and what are those random things that you probably won't use too often but it could be it could really come in handy at one point and this is a really super basic example of it if we want to take a look I do have an a there file here open this is something I'm building for my SAS course which it's a site we're gonna build together at the very end of the course I'm working on building it out now and it's what gave me the idea for this video because I just love doing it so much when I was building this out and it reminded me of how much it can be useful so if you're not used to SAS a few things here might look a little bit weird but you can tell pretty right off the bat I'm using my grid area so right at the top I'm setting up my titles are on a grid area everything is just getting a sign a grid area so the title here the image right there has the well there I'm actually using a grid column and as we looked at we can use grid columns with names that can also make things work which is kind of cool and so everything's assigned its own little area and then what I've done is if we do a little inspect on here and I'll go a little bit further down just because I want to bring up this and let's just make this a bit bigger just we can see it a little bit better and just to show you how things are sort of jumping around a little bit I have my titles starting an axe and there's a column here then we have a main area that sort of goes here I have this going the whole spanning the whole size but here especially if you pay attention where the comment little feature is there that is gonna hop on over right now - over here so that looks a bit better these well that doesn't really matter too much with the grid area but that moves up if the text goes from being sort of not full width to taking up a bit more space I go bigger again so you can see there's a big empty space that disappears and then at the very small screen side it looks much the same but there is just a little gap that sort of goes away on it all so this gap here and here disappear and so all of that is done really really simply here where I have my regular it's this is my content snippet so you can see I have my grid template areas and then I'm using some mix-ins and other things but here I have a mem Q is for media query so I'm setting up a media query for small screens and then all I've done is rearranged the grid template areas here then for medium screens I've reassigned the grid template areas again and the columns and all that are set up in another spot so we don't see them right now but I'm just sort of rearranging everything throughout as it goes also including the line that I forgot about so this underlined is folly on my grid as well so just this whole idea of being able to rearrange things completely even if it's little elements and little you know it's not necessarily the whole layout that's changing but you're just moving a little thing from one spot to another and changing the way empty spaces are dealing with at different screen sizes it just makes it so easy when you're using grid areas and signing those so yeah that's why I am in love with great areas isn't that great I am grid areas are absolutely fantastic and remember when I said that I was stressed because I'm announcing something on Friday well he sort of got a sneak peak of what I'm gonna be announcing there at the end when I was looking that's a square stuff so just a little a little preview of what's to come on Friday but yeah I hope you like this if you are using grid let me know about it in the comments below or are you waiting for support to get better because support for grid is really good if supports the thing that's really driving you nuts let me know in the comments because I want to know if how many people that's actually holding back right now because support is getting really good and autoprefixer is gotten really good at it and I'm planning on doing a series in the coming months about autoprefixer but I have also linked to a really great CSS tricks series of articles down below that explores how you can set up and use autoprefixer so it works in Internet Explorer you can use grid and Internet lor and pretty far back it really so if browser supports your thing and why you're not diving all into grid I suggest you check out those articles otherwise just thanks a ton for watching thank you so much a massive thank you to my patrons you guys are amazing if you don't know about patreon people on there are supporting what I do here and I can't thank them enough for it especially Lauren who's my supporter of Awesome with a very generous donation so thank you so much for that Lauren and just thank you to all of you once again for watching please come and join us at the community come the one click link you're in that's it there's no nothing else so you know click the thing write in a username and you're there and I'm guessing if you already have a discord account you don't even have to put a user name in so come and join us there's no excuses so I really look forward to seeing there hanging out with you chat and seeing what you're up to and all of that it's also a place you can give suggestions for video so I'm always reading suggestions of videos in the comments section below but if you want to you know a more direct line of attack you can try me in there as well and I think that's it so until this Friday when I have my big announcement don't forget to make your corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 106,313

Rating: 4.9072027 out of 5

Keywords: Kevin Powell, tutorial, html, css, css grid, grid areas, css grid areas, css grid-areas, grid-area, css grid areas are the best, why i love css grid areas

Id: duH4DLq5yoo

Length: 19min 56sec (1196 seconds)

Published: Wed Jan 23 2019