Creating a nice layout CSS Grid layout using grid template areas

in this video I'm continuing my exploration of the CSS grid these videos have just been insanely popular you guys seem to have a huge appetite for it so in this video I'm looking at grid template areas as well as just the grid template property just in case you're new here my name is Kevin and I bring you weekly videos on how to make the web and how to make it look good while we're at it so as I just said these videos been crazy popular so I'm super excited that you guys are as excited about the grid as I am because I think this is just fantastic coming from a print background I can actually start thinking about things a bit more in a print way than I used to be able to and I'm finding it a bit difficult to change my mindset when I'm building the websites still but it's it's getting there and the the grid template area is being able to really lay things out exactly where you want them is awesome and you name your areas and then they just fall there it's fantastic so as I mentioned I'm gonna be looking at grid template areas but I'm also going to look at the grid template property so that one is a shorthand for your grid template rows or grid template columns and your grid template areas you can combine it all into one property so that's we're gonna do that on two different things so I have a full web site it's gonna be it's a wall it's a simple layout but I'm gonna try and make this one look a little bit prettier I have a Photoshop file we're gonna follow so I'm gonna do it for the whole site we're gonna do a big layout and then I have a little individual card element and I'm gonna use the grid on that card element as well and both of them will be using areas on top of that another thing that I'm gonna be looking at is the min Max property so the min max what's not really a property it's what you're using when you're it's a value that you're using for your grid and column sizes it's pretty much like a max width and a min width smushed together so you can control your minimum and your maximum size at the same time it has a few limitations but it's super awesome once you sort of get used to how it works so we'll be using that a little bit for a few of my columns as well so in this week's video as I said we redoing our grid template areas and here is the layout that I'm gonna be trying to build I have a little header at the top a big area here a main area of here a sidebar and then footer down at the bottom what I've done with my layout is I have broken it down so I've done a bit of an overlay here just to break down the different areas since we're using grid template areas and I'm also gonna use a grid template areas on my card here as well so I've broken that down as a separate little element that is threw off to the side so I wouldn't have overlays on top of other overlays now let's go jump over to code pen and we can see what we're gonna do over there so here on this document what I've done is I've already gone ahead and done my HTML so I have the mark-up done but just to explain it a little bit I have my header right here so that's that black bar that went across the top that has an h1 in there I have a hero div here which is gonna be that big one that had the yellow background on it so in there I have a title and we'll just an h1 in a paragraph so that's my h1 here my paragraph right there then I have my main area so in my main I have an h1 for the title and then I did my div class of card so my div class of card here let's just make this a little bit bigger my div class of card has an image in it now that image does have a class on there let's go find it I just called it card IMG I have an h2 which is my card title and then I have a div for my card content just because I have a paragraph as well as a link and maybe you want more multiple paragraphs so I want to be able to contain all of that in one thing so I did div for my card there I have an aside just for my little sidebar there that just has an h1 and a paragraph in it and then my very simple footer now I'm going to be using sass for this or a CSS with the S CSS syntax and so I brought it in a Google font I've are 2 google fonts actually I've set up a whole bunch of variables here and a couple of mix-ins just to make my life a little bit easier and I'm not going to go into details with these but if you want to see them and see how I've set them all up go to the code pen the link for that is down in the description below and you can check them out a little bit more as far as the styles themselves all I've done is a very basic style here on my body so and it's not really doing very much and we want to make that doing a lot more now for this because it's my entire page that I'm doing in this I'm gonna put the grid on the body itself so we're gonna just come down here and do a display grid and you can see nothing very much changes if I undo that just really quickly things will get a little bit closer together let's just take that off completely and then when I put it back hope you're going the wrong way okay I'll just type it back out display grid things spaced out a little bit more and it's because when you have display grid there's the collapsing margins don't collapse anymore so that is important to know now I want to set up my grid template rows and my grid template columns and then we're gonna bring in the grid areas from there so what I'm gonna do is let's set up my rows per so I'm gonna do a grid template rows so I'm thinking for that top bit let's go look at Photoshop really fast and as you mad a little bit on this so for my Photoshop file here I'm gonna have a set height on that I'm gonna have this be like sort of maybe 50% of the screen this is a general content area so I just want it to fill in as I go so I might have more content later on so we're going to put that height to auto for this row here and then these two actually will be exactly the same as one another so for the rows here I'm thinking of 10m for the height maybe yeah I said about 50% so 50 viewport height and auto and again Auto will grow and shrink along with it and then another 10 M so this is Auto just means take as much space as you need depending on the content that is inside of it then for my columns grid template columns we can set this up and I'm gonna do we're gonna start off with one thing and then we're gonna come back and modify this a little bit because I do want to look at musing min max for these as well but for now I'm going to do a 1fr so this is just one empty space then I'm going to look at trying to think my main content area I'm just trying to break this into like fractions here so 5 to 1 so this is just how much of the available space do I use so my main content area using a five units two units and then one on one down the side so if we're looking at my Photoshop file that would be these are the one and one on the sides and then this area would be about five and that areas about to I could be more precise with this but I think that should work for this demo and as I said I'm gonna put some min/max values on both of these later on we're gonna look at that as well but let's get the layout going together before we get into that now where this gets really powerful is where we bring in our grid our grid template areas so what I want to do is my grid template areas now this is where it gets super easy so we looked at line names before but now what I can do is I can just say what I want so I'm looking across here so across the top I have my four columns so I want all four of those columns to be my header at the beginning so I can just write in header header header header and now that whole first column I know not my first column sorry my whole first row is all going to be header it's gonna use up all those spaces so that's cool now I could just keep typing across here and then well when you close that and then do another one and then another one beause that you know go across but that becomes really hard to read so I'm just gonna push return and now I'm going to do my second one so my second one was my big hero area so I also want that one to go across I'm a new hero hero hero hero now we're getting into the main content area so I have a few different things I have here so where the header one here is my first row then the hero here is my second row now we're going into this Auto one but I want the first one and the last one to be empty so to make something empty you just put a period I mean your period I'm gonna say this is my main area I'm gonna say this is the sidebar and another period so the first row of 10 M not 10 M sorry the first column of 1fr here is going to be empty then I'm in my main content area using this 5fr then I'm going to have my sidebar using the 2fr and then I'm I have that last one at their area empty and then for my footer just for them again footer footer or footer footer and that's it it's really really awesome and it is that simple so next what I want to do is I want to start placing everything on there so this is where it gets really really easy to do so let's start with my header and we'll work our way down so my header my grid area is header and we should see that all of a sudden push everything down cool right so then I have my hero area so my hero it's grid area oops area is and boom everything else you get to move down now let's go to the next one I have my main so my main the grid area is main bang and last but not least and I'm out last of all as we have a few we have a side so the grid grid area on that one is my sidebar and last but not least my footer the grid area is footer and there we go so I have my my header going across the top my hero area here an empty space my main content area my sidebar and then my main footer down at the end there so let's just make this look a little bit nicer so we can actually you know it we want this to look decent so here my header my header in the footer will look identical so I'm just gonna do a header footer they're both gonna have a background that is black they're both going to have a font color that is yellow let's just scroll up so we can actually see that so that's looking okay I want to Center the text in there so I'm just going to do it a display flex and then do a just defy content of center and a line items center so that should bang it right in the center it's doing just that so that is perfecto I also have my header title and my footer title which look identical so maybe I shouldn't have made two classes for them but too late now if somebody used my mix in for that move this a little so I can do may include I'm calling this one font alt so it's my alternate font my main font is a Merriweather here and then my alt font is six caps and my alt font what am I gonna actually if I don't do anything it should come in oh it's because the default color is black that's why we don't see it so let's change the color to yellow and then we should see it cool and the font whoops the font size should be I'm trying to remember my I'm trying to remember my variable names here my font size font size so it's my font size font size and I don't remember whose h1 or h2 that looks too big huge - that looks better okay so that's in there and we should also see that going across the bottom awesome so that's that that's done so we can move on to my hero now so for my hero let's just move it up here a little bit we can give that a background background is URL and so I do have this URL right here I'm just gonna paste it in it's hosted up on code pen so that will be my background image and this one is also gonna be pretty nice and simple to set up display flex and again I like showing whoops I forgot my semicolon at the end of my background there I like showing that flex still has a place to live but you're probably sick of hearing you say that by now display flex I want to change my flex direction to make it a column so the things don't stack on top of your next to each other like that I want them on top items center justify content Center and that should plop it right in the middle my hero title so hero title let's do my ad include on there so on this one I'm also using my font alt so that you can see that clipped in right away but I need to give this a different font size so my font size I have an extra large for this one so I'm sure I haven't h1 font size and I don't think I've actually used it in here that's okay so extra large and that is perfecto I think that's good margin:0 there's a lot of space there margin of 0 and I also have my hero subtitle subtitle so my hero subtitle is in @include and this one I called my font base because it's my base font style won't change right away but I have a few little things I want to change on this so I want the color I want the color to be white and I want the font side looks the font size to be font size probably the h2 again it looks alright and padding enough padding margin of 0 I'm just going to leave that there for one second let's go look at the Photoshop design looks a little bit big but they both look kind of big let's zoom back in I chant grid areas pretty right there yeah that's good enough I'm happy with that so now we can get down on to the main here and my sidebar the main I don't think I have anything left to do on that actually the sidebar we're going to set our background color on there so I have a background of Dark Reign you might say it doesn't look very dark but whoops I spelled with an A and some padding on there would be good padding hope I spelled it right 1.5 m what do you yeah I called it dark red because it's the dark one I have some text it's a lighter color and we'll get there when we do our card I think I can do my card now actually so let's get into the card in another card I'm also gonna be using grid areas on and it's I'm going to show you something it's a bit different because here my grid area is always just go like all the way across all the way across all the way across well not sorry they use yeah I sort of you know it's sort of broken off and each row is broken into it but we can have grid areas that also go up and down so for my card um and I actually will do two things when I do this card I'm going to show you two different ways of doing it when it's a little bit faster than another one so with this let's get into it for my card so to begin with we have to do a card let's put a little cards okay so for my card I want to do what I want it to be a display grid so I'm gonna do it the same way I did before grid template columns I've I'm gonna have to write I think let's go look this is why I had this so yeah I have one column here and then one big column on the side and you can see this area before I had like grid areas I was breaking my gritty areas up the thing across this time I'm breaking the grid areas up up and down a little bit differently so I just want to show you know this is spanning two different rows whereas on this one nothing spans two different rows so I I want to show you how that works so grid template columns I have a one fr3 FR maybe will work I hope so and for my grid template rows I'm gonna do something also a little bit different on this because I don't want my first one to be very big right I want it to be as small as the title I want to make sure it's not bigger than the title itself because if we come back to here if it's bigger than the title it's gonna cause some weird issues like this space here will just be some padding on it but I really want this to be the small as possible this the top row should be tiny tiny tiny so what I can do for that is its main content so it's gonna be as small as possible to fit the content in my first row and then my second row I can just do an auto on it I could probably do auto auto - to be completely honest I find with my experience main content and auto often work exactly the same I don't have tons of experience with this but from there's probably some subtle differences between the two but for most of my experience they do but so now what I could do is my grid template areas and so my first again I'm going across so I have a one fr and a three fr so I want my image and then I want my title next to it but then what I want to do is I also want my image on the second row and I want my content next to that so I can have my image so by doing image and then image I can have the image part go to down and yeah I think it's gonna work out nicely so let's do my card image and I'm actually going to just to do this let's give them all background color so it's this background of pink so we can actually see exactly what's happening background of pink I have my card title card with a D card title with a background will you let a light blue and last but not least we'll do my card our card image won't get a pink background though cuz it's the image itself oh well that's my card card card card content we can see these other two at least a card content will be a background I don't like green so at least we can see them okay so right now it's looking like this so my card image I want this grid area to be my IMG and right away it pretty much fixes itself I want my card title the grid area is going to be title and I don't think anything is actually in the change now with these ones because they're fitting in the only space they could grid area of content content content here we go so this image would be reaching down to fit both of those so if it wasn't a square image it would have the room to move up and down which is cool so we get rid of those backgrounds I guess we really need those but we can see that it is working what else do I need I need to do a few more things to make this card work actually before I do those few other things I mentioned that we don't have to write it out this way necessarily so there is another way of writing out your template areas so instead of writing it out this way with all three of these there is a shorthand and the shorthand for this is just grid template so if I just do a grid template like this what I can do is I sort of break it apart I'm actually gonna bring that back so I'm not gonna forget I have a min content and an auto and let's just comment these out so I don't forget what the values I put on them are so I can do a grid template and I love how this works so grid template so I'm just gonna you don't have to put the space here it just makes it easier for me so I'm gonna do my first one so I have an image and my title and then I can say what I want that row to be so that row was a min content no thing just I can just put a new line so my image so this row is gonna be an image and then a title and it's gonna be a min content then my next one is also going to be an image and next to it is the content and that one will be an auto and again it's say I had a footer for my cards too I could also do something like footer footer and then that could be set to whatever I need it to be but in this case I don't need that but what is you notice this is sitting at my rose but it's not setting at my columns so then to set up my columns I just do a - like this and then I can put my columns so when fr3 fr and you can see it's working and say this was like a five it should you see its switching a little bit or let's just make this like a hundred pixels so you can really just see it is working it's shrinking down to a hundred pixels there I'm going to leave this at three F R though so the the grid template is the shorthand for doing everything you can give it the area names the rows and the columns and it works really nice and its really nice to visualize so why don't we refract or other one that's up here too and so I'll just put a space so header header header header that's over 10m I'll just comment these out because it's gonna screw everything up so that's over ten M then this is over fifty viewport width this is an auto this is another ten M and all of that is now I can put my columns so just keep it on the screen oops I don't want that I want to do it 10 here so 10 M and to keep it on the screen I can do it over here one fr5 f R 2 R 1 F R I believe that should work do I not header header header oh grid template not areas anymore there we go and it's working and I think this can go on its online right yeah perfect dope so there we go so the this might even be easier to deal with than doing it sort of the the longhand way this grid template short way header all the way across you're taking up 10m height here all across you're taking up a height of 50 viewport width empty space main content sidebar empty space you're Auto because I want you to grow and shrink with the content and then a footer all the way across using ten and then what are they going across well it's a 1 a 5 a 2 and a 1 so this like all of this goes or all of those go over a 1 fr these are all going over the 5 the 2 and then those last ones are all with of one fr so that's cool it's a nice easy way to write stuff out let's finish up my card here and before this video gets too long so for my card let's just make it look pretty at this point and I want to show you also how the auto works so when we add more content you'll see that it can that it can grow I also haven't said any gaps up and stuff I think maybe I should have four here but let's see so my card that's looking alright so what do I need to do here let's give this a box shadow because I do have a drop shadow on it 0 0 1 M rgba 0 0 0 0 point 5 that looks decent yeah so here you can see that it is getting stuck to there so let's go back and add a grid gap to here so my where's my here's all my stuff so here I'm gonna add a grid column gap of I don't know 1.5 m now it's important that I'm doing this as a column gap because we can do a grid gap and it's just going to do the columns and everything but then I'm going to get spacing between everything is it's going to put spaces between my rows and it's going to put spaces between my columns so I don't want a grid gap I want grid column gap and you can also do a grid row gap if you want to just control your rows or if you want them to be different so that just gives me my space here which and that looks perfecto so I'm happy with that I want to let's go back to my card I don't want my image getting stuck on the side there so let's give myself some padding on here padding:1em should use them at 1.5 because I'm using that everywhere that would look better so that's looking pretty good my card I want this image people to grow and shrink so let's just make sure this has a max width on it of 100% I should probably put a gap on these as well right so a card lets us keep all of this together grid column gap will stick with money so I can make too big that should be okay I'm gonna get rid of the space on top I can get rid of that space that's on my card title margin of 0 that will stick to the top better good mmm is there anything else that I need to do I don't think did I let's go look here quickly these weren't bold so let's take the bold off of that font weight is 300 probably make the font a little bit bigger but I'm not gonna get into that now I can't make the link look nicer and I do want to let's look at how this is gonna work because at one point things are gonna get ugly we don't like my image is gonna literally disappear because there's no space for it the max content the max width on this is 100% so even though this is you you know I have a 1 fr here but that one fr is gonna shrink to nothing because there's no available space cuz the text here like this this can't get any smaller so it's just gonna shrink away to nothing the fr is not like representative of how much room it's taking it's if there is available room how much room do I take of the available space so if there's no available space that image can shrink away to 0 which we don't really want to so we want a lot and even that sidebar is getting really really narrow so we want to stop that from happening and I'm thinking I was gonna use the min/max on my I'm just gonna stop that like this 5fr thing I'm gonna stop it from getting smaller so let's go find that again so here I have a 1 F are my 5 f are my qu f are now that's on big like when we start getting bigger and it's growing but that's fine um that will work it well I'm wondering this probably could get too big that way but that's okay let's see but I do want to stop this area from getting too small yeah from getting too small so if I want to stop that area from getting too small what can I do I can do the min max now min max it's taking me a while to really grasp the proper way to use it and I still feel like I'm struggling a little bit sometimes so what I'm going to do though we'll do a min max on this now it can be really tempting to say something like 1 F air 5fr there comma-separated so 5 by far if you've never seen the min max thing you can see this isn't working because this isn't valid I want this to be like let's just say 10 pixels for now so it's valid so this is sort of like setting a min width and a max width at the same time you've probably used your min width at times or a max max width at times so the min max for the grid it's you're studying both the minimum and the maximum at the same time the important thing is the minimum has to be you can use em schrems things like that but it can't use the fre unit it can't use I don't know if I could use a percentage or not say I do like 5 percent that work maybe yeah it seems to be working so I guess you can put a percentage but it can't be like abstract II sort of things like FRS it needs to be a something that gives it like a specific value the other thing is obviously the minimum needs to be smaller than the maximum or it just ignores one of the values I forget which one so in this case my biggest that I wanted to get so it just at one point will hit five but my minimum value let's try 25mm and let's just see where that stops that there we go so that's too small but you can see now what's happening is when it gets to the width of 25m it just stops and it stops getting smaller and it can't get smaller than that so now and this one is also stopped shrinking but I think it's there's probably a line of text here that can't get any smaller because my two side bar is like you can see this area here is getting smaller in this area is getting smaller so those 1f RS are still disappearing until at one point I do get a vertical scrollbar so let's change this up a little bit bigger 30 so it's gonna look like that which is pretty cool maybe it's getting too wide but and then it's gonna shrink and then it's gonna eventually lock into place that's still pretty big though I like no it's not terrible it's a bit of a squared off card but it really depends on the content that's inside of it as well but I think what I also want to do is give this a min/max because I don't want that getting like that narrow that doesn't look so good so let's give that one a min/max as well so I'm just saying if that's 30 let's do a min max like half of that so half of that would be 15 and my big was 2 and don't forget to come a separate them because I always forget to come and separate them so let's go see how this is gonna look so that looks pretty good this is gonna go it's gonna start smashing and then you can see that this they both no see right around here the sidebar is gonna stop getting smaller right there my sidebar stops getting smaller and the other ones still shrinking is still shrinking and then all of a sudden that gets smaller so that locks now I still have my fruit my Fr my one far on this side my 1fr on that side so they're still shrinking away and then eventually we get the scrollbar and a few people have asked me about that I'm not going to be doing it responsive in this case but you just build in some media queries and rearrange stuff and it's pretty straightforward I am going to be building a full site or a full page anyway using this so I will be using media queries in that one but I just don't want these I want to try and focus on a couple of things in these videos and the media queries will come when we look at a larger project so that's looking pretty good let's just fix my link because I want my link to look good on this one saying I don't want to waste time on stuff and then I have I'm wasting time on this color was yellow and my font size on it was a little bit bigger so I'll do like a 1.1 in just a bumper up a touch and that looks fine and I could do a hover and stuff but again not trying not to waste too much time so I'm happy with that let's add some more cards in here just so we can see what I was talking about so there's one card copy paste paste paste paste and there's multiple there's sort of stuck together there a card card card margin-bottom 1.5 m and I'm using 1.5 m everywhere so that probably should have been a variable as well but c'est la vie so now you can see that they all go and this whole area just sort of stretched down and if I paste more of those in here paste whoops paste paste paste paste it's because this row is set to auto it can just grow forever and forever and forever and the footer will always just sit down at the bottom so that auto thing can be really nice because it just fits the content that you need to fit in there so that obviously makes life a lot easier and I do believe that is it I'm pretty happy with this so once again this is available on code pen you can come and play with it I'm going to delete a few of these cards because we don't need 8 million of them and there oh there's the grid areas I really like how they work I hope you like that as much as I did there it was a lot of fun to build that and it makes it I just find it makes it super intuitive to make a layout like this it really makes my day if you did like this video please hit the thumbs up to let me know that you liked it also leave a comment down below if you have any questions any comments or if you just want to say hi if you haven't yet subscribed to this channel you're just stumbling across this don't forget to hit that subscribe button cuz I made videos like this every single Wednesday so hitting subscribe to make sure you don't miss out on any of those and until next time don't forget to make your corner in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 96,745

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, Kevin Powell web, CSS grid, simple layout css grid, grid area, grid areas, grid-template-areas, grid template areas, grid-template-columns, grid template columns, grid-template-rows, grid template rows, grid template, how to use css grid, make a layout with css grid

Id: v5KzBPUEgGQ

Length: 35min 11sec (2111 seconds)

Published: Wed Aug 16 2017