1
00:00:05,190 --> 00:00:13,500
Starting from the layout we inserted into the container consisting of three rows and three columns,

2
00:00:13,870 --> 00:00:23,340
we can now use the areas that we are assigning both to containers and to individual items to define

3
00:00:23,340 --> 00:00:25,200
their position in the page.

4
00:00:25,560 --> 00:00:37,660
Let's start by deleting great column start and end in ESP one and ESP two after that inside container.

5
00:00:38,280 --> 00:00:42,150
We are going to insert the grid template area.

6
00:00:45,740 --> 00:00:57,350
This property allows us to create a series of areas in within every single road so we can define this

7
00:00:57,350 --> 00:01:01,550
time on a new line through double affixes.

8
00:01:02,530 --> 00:01:13,030
Every distinct row with its name, Bazine, on our previous lesson, we can insert area one.

9
00:01:14,580 --> 00:01:24,660
In correspondence with the entire first row so that you can be assigned to Espie one and appear the

10
00:01:24,660 --> 00:01:33,450
way we have already seen in the previous lesson, then we can insert area two for two cells, then for

11
00:01:33,450 --> 00:01:37,620
two intersections and area three for just one.

12
00:01:37,650 --> 00:01:44,730
Let's now close it off with area four, area five and area six.

13
00:01:45,910 --> 00:01:54,460
We might also consider to execute a period instead of an area name within this template.

14
00:01:55,820 --> 00:01:59,600
To make sure that a space is left within it.

15
00:02:00,520 --> 00:02:12,040
For example, we could modify first area one by inserting a period at the end of the first row at this

16
00:02:12,040 --> 00:02:12,700
point.

17
00:02:13,060 --> 00:02:22,240
You can save and insert the area, greed's into the various items.

18
00:02:24,030 --> 00:02:28,350
In the first, for example, we might choose to insert.

19
00:02:29,510 --> 00:02:35,300
Area five, so to make it different from the latest one.

20
00:02:36,260 --> 00:02:39,710
Let's also insert in the other Espers.

21
00:02:40,880 --> 00:02:42,140
And let's give.

22
00:02:43,370 --> 00:02:50,000
Area one to F.P., to then area two to be three.

23
00:02:50,960 --> 00:03:01,160
Area three area for an area six to our SP six so that the order is slightly modified.

24
00:03:02,170 --> 00:03:04,510
Now we can save and refresh.

25
00:03:05,650 --> 00:03:12,640
To check the result, as you can see, we assign to area one.

26
00:03:14,040 --> 00:03:21,810
And therefore, to space to which is going to coincide with area one, the first two cells.

27
00:03:22,690 --> 00:03:31,840
And the third, thanks to the period, will appear white afterwards, area two will coincide with area

28
00:03:31,840 --> 00:03:36,010
two and all the others have been entered singularly.

29
00:03:37,280 --> 00:03:46,370
So as you can see, also this way, correctly, defining all the dimensions of every single item on

30
00:03:46,370 --> 00:03:51,590
the page is possible starting from these template areas.

31
00:03:53,140 --> 00:03:57,670
So if you're handling grades, you want to define precisely.

32
00:03:59,590 --> 00:04:07,450
No doubt the best method is what we have just seen since the areas are manageable simply.

33
00:04:08,640 --> 00:04:12,690
By these three lines of code in the stylesheet.