Intro to Grid Areas 0:00Okay, check this out. We have a simple bread-and-butter layout here, with a header at the top, a navigation on the left, your main area on the right, and the footer at the very bottom. Very very common. Okay, so right now, this is what we see because it's completely unstyled. Now take a look. We're going to review grid area and grid template areas in this episode. So we can assign essentially a name to any section here. So take a look. Like imagine we have our header, and we're going to give this a grid area.So take a look. Like imagine we have our header, and we're going to give this a grid area. Now grid area, it's basically shorthand for setting your grid column start, grid column end. It's almost like how margin is shorthand for margin top, margin right, margin bottom. But anyways, in addition to that, you can set grid area equal to any name you want. So I could set it to something like header. And now when I'm defining my grid, I can reference this name. So let's do this. Let's give them unique background colors, and we'll do this for all of them. Naming Areas and Colors 0:50So let's do this. Let's give them unique background colors, and we'll do this for all of them. So grid area is nav, background color is brown, main grid area is main, and then background is a grayish color. And then finally, we'll have our footer, and once again, grid area is footer, and background is brown once again. Okay, so if we take a look, yeah, we're still dealing with basic divs essentially. So they're going to take up all of the available space. But now I want you to notice on our container here. So if we come down, we're going to style our grid container. Enable Grid Container 1:20But now I want you to notice on our container here. So if we come down, we're going to style our grid container. And now I'm going to set a display of grid here, but you'll notice immediately when I do so, refresh, everything kind of gets all blown up here. And this is because the default grid area is going to be auto, but we've overridden it to a name here. So take a look. If I were to remove these entirely, this is what you usually get when you set display grid. And it doesn't really do anything because we have a grid area of auto. Define Columns and Areas 1:48grid. And it doesn't really do anything because we have a grid area of auto. But now we're setting it to a name value which overrides auto. So at the moment, yeah, it just looks kind of crazy. Okay, let's go ahead and set up our grid template columns. And let's say our first column should be about 150 pixels wide. And then for the remainder, just automatically fill it up. Or you could also use the new fraction keyword here that we'll talk about later. We can now define our grid template areas, and we can reference these named properties here.We can now define our grid template areas, and we can reference these named properties here. So for example, take a look. For the very first row, I want it to be header and header. So I want it to take up all of the available space. For the next row, I want it to be nav for the first 150 pixels, and then the main section for the remainder. And then finally, I'm going to have a footer that takes up all of the available space. So that will take up both columns. Okay.So that will take up both columns. Okay. So you'll notice there's no comma here. This can be a little tricky. You're not doing anything like this. You're just making them their own strings. And this is pretty common how we've outlined it. We don't put it all in one line, even though you could. It's a little more clear that we're kind of creating a miniature grid here. Okay, so if I come back and give this a refresh, yeah, now you can start to see what we'reIt's a little more clear that we're kind of creating a miniature grid here. Okay, so if I come back and give this a refresh, yeah, now you can start to see what we're doing here. And you know what? In fact, let's make main be blue. Yeah. And then finally, footer green. Really pretty layout here. So notice we didn't have to worry about the track too much or defining column starts or column ends.So notice we didn't have to worry about the track too much or defining column starts or column ends. Instead, we're just referencing these areas here, these named grid areas. So for example, imagine we want navigation area and main area, but then the footer is actually just going to be over here, and we want the navigation to stretch down. Okay, we'll just come back and say, well, at the very bottom, that should be navigation and footer. And you see how that works. And then, of course, the same is true. Like if we want the navigation at the very top, we'll just say nav header, and now it's Add Gaps and Spacing 3:39And then, of course, the same is true. Like if we want the navigation at the very top, we'll just say nav header, and now it's going to take up all of that space. But let's bring it back to what we had before. Now let's give some spacing here. So we'll say grid gap is 10 pixels or so. And actually, on that note, one thing we haven't covered is that grid gap is kind of a catch all. But if you ever need to be specific about the gap for your columns versus your row, well, you could say grid column gap.But if you ever need to be specific about the gap for your columns versus your row, well, you could say grid column gap. And now that's not going to cover the rows. So it's just the gap between each column, or of course, you can switch to row. And that way you can be specific about your gap value for column versus row. But in our case, it doesn't matter. So we will use the shorthand. Okay, next. So we have grid template columns, grid template areas. But now maybe you want to be explicit about the size for each section. Set Explicit Row Sizes 4:25So we have grid template columns, grid template areas. But now maybe you want to be explicit about the size for each section. So don't forget that's where grid template rows comes into play. So maybe your header should be 100 pixels tall, 100 pixels. Next, this section should auto expand. So we'll set that to auto. And then the footer should be about 100 pixels as well. All right, now if we give this a refresh, yeah, we're being explicit there. And don't forget this section right here in the middle, it's automatically going to expand. So for example, if we replaced this with a huge bunch of lorem text, yeah, you're goingAnd don't forget this section right here in the middle, it's automatically going to expand. So for example, if we replaced this with a huge bunch of lorem text, yeah, you're going to see this section row will automatically expand to contain it. Anyways, one thing to look out for is if you make a mistake, it can definitely get really, really tricky where you have no idea what happened. So for example, in this case, header, header, it's really easy to understand, but it won't always be that way. So imagine by accident, you do something like, you know, the header and then the footer up here. Well, if you give it a refresh, you have no idea what's happened.here. Well, if you give it a refresh, you have no idea what's happened. And it doesn't give you a clear indication as to what you should do. So that's something to keep in mind. This can sometimes get a little bit tricky. Anyways, that'll do it for this episode. So you learned about setting a named grid area, and then you reference that name within this new property, grid template areas. And just remember, each of these values will correspond to the column in this case. And notice we specified here, we have two columns.And just remember, each of these values will correspond to the column in this case. And notice we specified here, we have two columns. So we have two values each to match those columns. If you were to change this, like we want a sidebar, and then a shorter one, and then auto for the remainder, let's give that a refresh. Yeah, now we're going to see, it's very condensed in this case, because we're only filling up these two values. So we have a header and a header that should take up a total of 250 pixels. And if we measure, yep, about 250 pixels. So what we could do here is say header, header, header, and now that will take up this value,And if we measure, yep, about 250 pixels. So what we could do here is say header, header, header, and now that will take up this value, this value, and then also all of the remainder. And then we could say nav, main, main, and refresh, and yeah, now we're using a three column section. Which means we could add another area here, like, I don't know, an aside maybe. And if we come back, give that a refresh. Let's put the aside right next to the navigation area, okay? So we'll say, we're being generic with the name here, but you would want to be more specific. Navigation area, aside, and the background color will be black with a color of white.So we'll say, we're being generic with the name here, but you would want to be more specific. Navigation area, aside, and the background color will be black with a color of white. And then up here we'll have nav, aside, and then the main section. So yeah, now it jumps up. So seriously, think about how cool this is. Before CSS Grid, this is stuff that 100% was impossible with CSS, without a huge amount of trickery, and it was just a huge nightmare. Now you can insert things exactly where they need to go, and you're no longer entirely dependent upon the order and the structure of your HTML.dependent upon the order and the structure of your HTML.
