Next up, we learn about great template area by defining something as great template area, you're referencing
the names of the grid areas which are specified with a grid, a property repeating the name of the grid
area causes the content to span those cells.
A period signifies the empty cell, the syntax itself provides a visualization of the structure of the
grid.
So let's try this out.
Let's jump in here, comment template area.
First of all, I want to show you how the syntax looks, so actually going to do this in another comment.
It's a great template area and this will contain the grid area name.
Then this would be a kind of a column and then will, for example, with a period empty cell and then
a not a cell.
For example, none, and then will come another cell.
Now, the first thing that we need to do is to define the items of the great container as what they
will be or otherwise we need to give them a name.
So, for example, let's see, we're going to take the class of MIT, contain a grade item.
Now we're going to select the ninth child.
And this just goes with the first child.
And for this first child, we'll give it a grade area, name of net.
OK, now we can repeat the same thing for all six areas.
So let's go and copy the segment five more times.
One, two, three, four, five, and let's go through them.
So this would be number two and I say this would be the header.
Then we'll have eight main.
Then a section.
Then let's say we have an aside
and last but not least, a photo, which is second, we need to change this to three days to four days
with a fifth child and the sixth child.
So basically what we're doing, we're selecting these items.
Let me open this up once more and it's open up our inspector again, because now we can take our great
container.
And this fossil display has great.
Although we have it displayed up here somewhere as great, but I want to have this I want you to have
this entire code in one specific area now will say great template columns.
It should have four columns or repeat four times one for.
What does one of four.
Therefore, the rules will set them automatically.
So set auto, and now we can draw out our great template area to step in grid template.
And Arya.
I'm going to go not no name down here, and we think quotations, first of all, the up the upper side
right here want to have a navigation.
OK, so I'm going to type in four times now and with spaces between them, and this just means that
the first item will occupy the upper space with the navigation because it is already happening here.
So first item will be basically occupying the entire space as a nav bar.
Then on a second row, so let's go down here.
Once again, between quotations, who said you would say that it should have a side, then it should
come a header and the header will spin out there, I'm going to spin out the header on three columns,
one, two and three.
Now, after this, I want that aside to spend down two more columns, so I'm going to come up with this.
I actually am not going to copy this, so don't get confused.
So underneath this aren't going to have an inside again.
Then the main section, we just pan out over two columns.
And then MDL.
OK, after this, we're going to have another roll with the first column being a site, then a section.
Then a section again and then empty MDL, certainly so save this.
Let's see how it looks.
OK, so I we see exactly like we typed it out.
We have up here in navigation, which is the item number one.
Then down here on the next row we have a side and three columns of header kaso aside.
One, two, three.
The second item with header.
And you can run the side was the fifth item that we have assigned and maintain two columns and then
an empty cell, so Heather, a side main main and then an empty cell.
And then we have a side section section.
And the last thing we want to do to spin out the entire Bahram column with a footer tonight to type
in footer and copy it four times.
Three times what?
We will have it four times then in our Bottoms column about Ambros.
So, yeah, there we go.
This is how we can use great template area.