Easily Structure your Layout with CSS Grid's 'grid-template-areas'

hey everyone Gary Simon of course cetera so today we're going to take a look at a very specific property of the CSS grid and that is grid template areas and really it's awesome and how it allows you to ultimately control I your layout using a CSS grid alright so this is kind of the example I'm going to show you in a second of how to do has a sidebar header and some other stuff it looks like a lot of nested areas but we can really take care of it all with one CSS grid and it really relies on using that the grid template areas property and it's really cool and easy the way it works will also make it responsive alright so today's question is what is your biggest challenge if you're a designer or a coder alright so just let me know try to think hard what is the single most difficult thing that you face and your task or your journey into becoming a designer and/or a coder alright so let me know in the comments and I will let you know my answers they're always the pin to answer make sure to check out the description here in YouTube for the discord server and all that good stuff and make sure to subscribe alright let's get started alright so to get started I have a blank folder that it just created called gta4 grid template area and then a blank index to HTML and a blank main CSS so to get our initial HTML up there put exclamation point and visual studio code by the way I'm using it's a free code editor from Microsoft you can download that if you wish very popular and then also we'll link up our main CSS here right there alright and let's go ahead and get started so referring back to this Adobe experience design document the we have to think about you know the type of HTML elements that we need so for over here we have a sidebar we can use the HTML element aside for that and then we have up here a header then we have three sections right there and then a main content area and then a footer so that's what we're gonna do so we stock we stack them in order of going from left to right top to bottom so the very first one that we have here is in a side element oops nothing will go inside of it though dang it there we go and then the next element is a header element after that the elements that we have are those three sections so we can just use three section content elements so we'll just put shift all and down to replicate that then we have a main content area and then we finally have a footer and of course to save time you know we're not putting any content inside of it it's irrelevant all right so that's it for HTML we'll go back to the main section and I to get everything to fit inside the viewport just for this demo we're gonna put body and HTML the height we're gonna set at a hundred BH viewport Heights and then I'm gonna control B to get rid of that sidebar and then we're gonna put in wait one second use our body and we're gonna put in a margin zero to get rid of any default margin padding margin values ah geez I can't talk hence early we're gonna put in a display grit so the body element is going to be the grid container for these elements right here alright so then we're gonna put in to use in conjunction with a grid template areas property we're gonna define the columns and rows alright so grid template columns alright so how many columns do we have here well you can think of it like okay one column here in one column here and you could do that but you would need more than one grid container for this stuff right here so we don't want to do that what we'll do instead is we could think of it I'd like this get rid of this stuff and really what you see here is one column two columns three columns and four columns alright so we're going to put in the four columns right here and we have to think of how how much space they should take up width wise so the first column is our sidebar and going to put Auto and that means take-up over any leftover space after I specify on the other column so we'll say 27% for the second third and fourth column right there alright now what about grid template rows alright so how many rows you know do we have so looking at it like this we'll see that if you just ignore this over here it makes it easier to see your rows you have 1 here 2 here 3 here and 4 here this will become its I own a row essentially with the help of grid template areas so the first one the first row is the header so we'll just say 8% just a little bar 30% for these sections OTO for main and then 10% for that footer now grid template areas alright so using those two properties above we have to create we have to name basically we're giving them names through grid temperate areas and defining how they you know which how they span across each other we have to think of you know we have to put in four values four columns and then also four different rows I'm right here so you'll see how this works right here we'll start from start from top to left this right here is a sidebar and this right here is the header so if we're thinking about the first row what is up here it's a if we're thinking of four columns I we have a sidebar we have a header a header a header that spans across these three columns alright so sidebar header header and header alright next for the second column our second row we what do we have alright so we have I'm just doing this just to show you I make it easier to see we have a sidebar section 1 section 2 section 3 so these are all going to be uniquely named alright so section will say section 1 sect one sec - insect 3 next is sidebar again and we have a main main and main and then also a footer footer footer alright so we put main and by the way add the extra spaces I'm adding it's just you don't have to do that just to make it easier to see all right and that's almost it that's most of the work though so now we start I using the du/dv placing a grid area property on each of these elements right here and we tie up the name to the name right here so we'll say a side grid area the aside element is our our sidebar now so that we can see it we can start giving a background color to each one of these based on that document that I created so 0 0 7 FF and to see this right click open with live server there you go here's our sidebar it's kind of a thick sidebar I must admit and then we'll have our header the grid area name is header and again you can name these grid area things anything it's just more relevant to name it header and so it's okay if these things these match though they don't have to and then we have a background color for that right here so now if we go back we'll see it at the top see it spans all the way across the four different grid template areas all right and then next we have our sections so I'm just gonna paste this stuff in I'm just gonna use the end of type pseudo-class - two specimens you know to target each one of these we could have given them IDs doesn't matter so a grid area sect one - SEC two SEC three I have unique just shades of blue just so we could see them and you'll see if we save this there we go and then also finally our main in footer same exact stuff so we have our main grid area of main a background color grid area footer and now it completely works so now how would we make this responsive for instance because that looks bad what if we wanted to stack on top of each other alright well to do that let's get a media query here going here alright and so what we'll do is we'll copy this stuff right here and we're gonna place that all right here just because we're gonna we didn't start with mobile first so I'm leaving I'm going to copy that here and then we're gonna define all the mobile first stuff right here so really let's say for instance we just wanted AI this grid we want to get rid of the header and the sidebar let's say for instance on mobile we'll just show that with an icon or something with JavaScript or whatever and so we're just going to forget about those two things and let's just say we wanted to stack on top of each other in one column I this section one two three the main and footer here's how we would do that by adjusting our properties so up here this would change into a single column of a hundred percent so it'd go across one hundred percent of the phone or whatever it is and then our rows we're going to have five of them because section one two three main and footer and so we'll just put repeat auto so the all be I of equal height there and then grid template areas we just simply have one column so we just start naming it I switch with whatever comes first SEC 2 SEC 3 and then main and footer all right so let's save that and we bring it in there we go so of course you could I add a lot more different media queries and really structure things maybe condense areas and do whatever you need to do whatever makes sense alright everyone hopefully you enjoyed that I again today's question is is what is your biggest challenge as a designer or a coder let me know in the comments make sure to subscribe here check out the discord server and I'll see you guys soon [Music] [Music]

Channel: DesignCourse

Views: 82,700

Keywords: css grid, css grid tutorial, css grid areas, css grid areas tutorial, css grid template areas, css grid template areas tutorial, grid areas tutorial, grid areas, grid template areas, grid-template-areas, grid-area, grid area, grid tutorial, css tutorial, css3 tutorial, layout tutorial, css layout, css layouts, css layout tutorial, css grid layout

Id: qTGbWfEEnKI

Length: 12min 4sec (724 seconds)

Published: Tue Jul 10 2018