Starting from the layout we inserted into the container consisting of three rows and three columns,
we can now use the areas that we are assigning both to containers and to individual items to define
their position in the page.
Let's start by deleting great column start and end in ESP one and ESP two after that inside container.
We are going to insert the grid template area.
This property allows us to create a series of areas in within every single road so we can define this
time on a new line through double affixes.
Every distinct row with its name, Bazine, on our previous lesson, we can insert area one.
In correspondence with the entire first row so that you can be assigned to Espie one and appear the
way we have already seen in the previous lesson, then we can insert area two for two cells, then for
two intersections and area three for just one.
Let's now close it off with area four, area five and area six.
We might also consider to execute a period instead of an area name within this template.
To make sure that a space is left within it.
For example, we could modify first area one by inserting a period at the end of the first row at this
point.
You can save and insert the area, greed's into the various items.
In the first, for example, we might choose to insert.
Area five, so to make it different from the latest one.
Let's also insert in the other Espers.
And let's give.
Area one to F.P., to then area two to be three.
Area three area for an area six to our SP six so that the order is slightly modified.
Now we can save and refresh.
To check the result, as you can see, we assign to area one.
And therefore, to space to which is going to coincide with area one, the first two cells.
And the third, thanks to the period, will appear white afterwards, area two will coincide with area
two and all the others have been entered singularly.
So as you can see, also this way, correctly, defining all the dimensions of every single item on
the page is possible starting from these template areas.
So if you're handling grades, you want to define precisely.
No doubt the best method is what we have just seen since the areas are manageable simply.
By these three lines of code in the stylesheet.