Grid Template Area

[00:00:00]
>> All right, we are up to chapter five, this is the third kind of syntax that we have available to us inside of grid. This is the grid area syntax and some people really like this I find that designers really like the area style of syntax better. Again, I personally prefer the numbers but this is just yet another way of writing exactly the same thing again.

[00:00:21]
So we're gonna go back to our moons one more time and basically what we're going to do is as follows. So we are still going to have for the layout of this web page, we are still going to have two columns and three rows. We're going to have exactly that kind of thing but now what we're going to do is the intersection of the columns in space and the rows in space, we can now designate those as areas and we can give them names.

[00:00:51]
So, what I'm going to say is as follows, so what I wanna do still, as as we have been doing, I wanna put Europa over on the left side and occupying the full column and putting the three moons next to each other, one after the other. So here's the way that I would write this.

[00:01:10]
We are going to make a new property, it's called grid template areas, what a great name. And the way we write grid template areas is a little bit odd looking. I'm just going to type this in and then we can talk about what it means. I'm going to call this feature a, feature b, feature c; so what this means is, each one of those lines with the quotations, each one of those is a row, and we're giving each of the cells a name.

[00:01:51]
So here the first cell is called feature, the second cell is called a. And then the second row, it's still called feature, so in other words the The feature in the feature merged together. Then we have b and in the third row we have feature in c. So the three features merge together to form one column and a, b, and c are the other areas, okay.

[00:02:19]
So that's how you would read that. Yes?
>> So, our grid template areas, by default, those are always rows?
>> The series stacked on top of each other, each one of those would be a row, correct. So, if we had more columns here, we might have additional names continuing on here, like, I don't know, we might have header, header, right?

[00:02:48]
So now I have four columns. So here I would have to call out four columns. Now b is gonna stretch across those four columns does that kind of make sense?
>> Yeah.
>> Okay, and c has got something else going on here, that's got footer and copyright. [LAUGH] So it's got three totally different things down there on the bottom and we've just made a really crazy grid.

[00:03:16]
>> It's almost like literally taking the elements of a page and writing them out the same.
>> Exactly, exactly, we're just giving them names, okay. This, of course, is not what we want here. Okay, so obviously I've assigned some names now, so I have a name of an area, it's called feature.

[00:03:34]
I have a name in an area called a, a name of an area called b, and a name of an area called c, right. So, I have those names now, I need to assign the names, right? So we're gonna match each of these figures up with one of those areas.

[00:03:50]
Most notably, the one we need to match up is the Europa image, which is our figure nth-child 3 and to do that, I will say grid area feature. Boom and it just works, how cool is that? Okay, now, io, Callisto, and Gani made here, they're just gonna fill in.

[00:04:18]
We don't have to actually tell it to go to a, b and c, grid is doing that best guessing there for us but we could assign those, if we wanted them in a different order we could assign those grid areas as well, make sense?