CSS Grids and Flexbox for Responsive Web Design Grid-area Exercise Solution

Transcript from the "Grid-area Exercise Solution" Lesson

[00:00:00]
>> Jen Kramer: What did you wind up getting here then for your grid template areas?
>> Jen Kramer: So it's gonna be .wrapper. Yeah, bring this up a little bit.
>> Jen Kramer: So it's gonna be the .wrapper class. It's gonna be grid-template-areas. And what did you get for an answer?
>> Jen Kramer: That should look like that.

[00:00:32]
>> Speaker 2: So would it be, sidebar sidebar header header, and then the next one would be sidebar sidebar article article?
>> Jen Kramer: Header, header and then sidebar sidebar article article. Is that what you did?
>> Jen Kramer: Okay, let's try that.
>> Jen Kramer: If we refresh the page?
>> Jen Kramer: That's pretty close, it's pretty close.

[00:01:03] We could probably argue that this would actually be header, maybe an article here.
>> Jen Kramer: And just push that sidebar over just a little bit more, but, yeah, you're pretty close.
>> Jen Kramer: Okay, so the question was, why do we specify header four times? So why don't we just try that?

[00:01:32] Let's just say sidebar header, and let's just say sidebar article and see what we get.
>> Jen Kramer: Okay, so if we do that, just say sidebar header and sidebar article, save that, refresh your browser. And it looks like that is working also, okay. And that is probably because of the way that we declared these columns up here in the top, the 1 and the 3 together.

[00:02:00] Okay, so if instead I did this, repeat (4, 1fr), right, so now I'm 4, 4 columns, one fraction each. Do you think it's still gonna work down here with the desktop. You think it's still gonna work? How many say it's still gonna work?
>> Jen Kramer: How many say, no, it totally won't work?

[00:02:26] A few more. How many say, I have absolutely no idea? That always gets the most votes. Okay, so if you go in ahead and save that and refresh the page, so this is what you get.
>> Jen Kramer: All right, so the combination then, so here where we just said 4 columns of 1 fraction each, then it becomes important to specify header header.

[00:03:01]
>> Jen Kramer: And article article, okay? So then it becomes important to specify those, right? So that we get the correct layout. Or we need to spell out our column widths like this, 1fr 4fr. And then down here in our desktop dimension again, we could just say sidebar header or sidebar article.

[00:03:32] And those will correspond with those widths of those columns above.
>> Jen Kramer: Make sense? All right, any questions on that grid area stuff? We're gonna do more with it. But I'm gonna hit a couple of topics in rapid succession. And then we're gonna go do a longer exercise.
>> Jen Kramer: Okay.

[00:03:59]
>> Jen Kramer: So that's grid area.
>> Jen Kramer: I'm sorry, I forgot one more thing I have to show you with grid area. Open back up your grid area .css file.
>> Jen Kramer: Okay, so, that should be 3fr. Here's another piece of syntax that you can use with grid area. So let's say that I wanted to have an empty column between the sidebar and the header and the article, okay?

[00:04:34] So just for consistency sake, I'm gonna change this back to repeat (4, 1fr). So now I have 4 columns, 1 fraction each. I have a sidebar header header and I have an article article. What I'd like to do now is I'd like to place an empty column in between the sidebar and the header and an empty column between the sidebar and the article.

[00:05:03] So the way you can do this is with the dot notation. The minimum number of dots is one. You can have more than one dot if you wish. So you could just say ..., that's kind of a nice way of doing it. You can have many, many, many dots if you want.

[00:05:18] But this is going to create an empty column in the display of the page. So if you go on ahead and save that and refresh your web page, you should see a nice big gap here. And of course, these fractions are quite large. So it's a quite large gap that we have in our layout, probably larger than you'd really want design was.

[00:05:43] But it's a thing that you can do here. You, of course, don't have to put it in the two column locations. You can simply say I only want it here, between the sidebar and the article. So we could set that up, and that will also work.
>> Jen Kramer: Okay, make sense?

[00:06:06] So this is something that you can do with this grid area syntax that you really are less able to do with just using grid column and grid row. If you wanted to have that empty column somewhere along the way, that becomes a little bit more difficult. It becomes much easier to implement here using this grid template area syntax, yes?

[00:06:28]
>> Speaker 3: What if we want the space to be smaller than one fraction?
>> Jen Kramer: If you want the space to be smaller than one fraction here, then what we'd need to do for our grid template columns is we'd need that set up some kind of different kind of thing here.

[00:06:42] Let's say it's 1fr 0.2fr 1fr 1fr. Let's see what that does.
>> Jen Kramer: That may or may not work.
>> Jen Kramer: So that helped a little bit.
>> Jen Kramer: Okay, and it would probably work better if I actually had that total it to a whole number instead of 3.2 fractions for the whole page.

[00:07:09] [LAUGH] But that's what I did.