1
00:00:00,210 --> 00:00:04,980
OK, so next up, we have with template, and it's actually just a shorthand for setting grid template

2
00:00:04,980 --> 00:00:09,510
rules, angry template columns and grid template errors in a single declaration.

3
00:00:09,780 --> 00:00:11,490
So let's take a look at how this looks.

4
00:00:13,800 --> 00:00:14,460
So there's nothing here.

5
00:00:14,490 --> 00:00:16,230
No comment with great template.

6
00:00:21,760 --> 00:00:28,870
Again, I'm going to take our container grid template container, a great container, just and I'm going

7
00:00:28,870 --> 00:00:30,040
to display it as grid.

8
00:00:39,120 --> 00:00:46,770
And after this, we don't need this comms and Roseau, I'm going to also comment about the above section

9
00:00:47,760 --> 00:00:49,730
so we don't have any confusion, OK?

10
00:00:49,770 --> 00:00:52,190
Now all our items are squished together there.

11
00:00:52,840 --> 00:00:54,570
So this place is great.

12
00:00:56,070 --> 00:00:58,920
And we're just going to Taiping Grid template.

13
00:01:03,540 --> 00:01:13,740
Now, this works exactly like we did up here, so I'm going to copy this and paste it down here.

14
00:01:15,030 --> 00:01:18,060
We don't need this and now we take a look.

15
00:01:18,090 --> 00:01:22,710
Well, it's still working because somewhere up here.

16
00:01:24,950 --> 00:01:29,930
We have defined some repetition, so, for example, here we have repeat and so on and so on.

17
00:01:29,930 --> 00:01:32,960
So I'm going to comment all of them out.

18
00:01:36,520 --> 00:01:41,380
OK, and we also need to know that that's enough.

19
00:01:43,190 --> 00:01:47,750
But we still need to have the areas defined for each item, needs to have a name.

20
00:01:48,930 --> 00:01:58,140
Now, I could do something like go here and say that this particular column or row should have 80 pixels.

21
00:01:59,620 --> 00:02:03,610
We need to be outside of quotations, so 80 pixels.

22
00:02:05,080 --> 00:02:06,390
OK, so let's take a look.

23
00:02:10,830 --> 00:02:13,740
Then I'm going to set our second row to Otto.

24
00:02:16,450 --> 00:02:19,270
The next one also to Arizona is going to compare this.

25
00:02:21,000 --> 00:02:27,120
This one also to auto, and I'm going to settle for the pixels and this are.

26
00:02:29,150 --> 00:02:31,810
Actually, the heights of our rose.

27
00:02:32,620 --> 00:02:41,210
OK, so that's it, safe and down here, we need it back a forward and then we're going to set all 50

28
00:02:41,210 --> 00:02:41,870
pixels.

29
00:02:43,460 --> 00:02:44,900
And again.

30
00:02:49,770 --> 00:02:51,450
I should they should be like this.

31
00:02:51,960 --> 00:02:53,230
OK, so let's take a look now.

32
00:02:53,630 --> 00:02:55,910
Now, what did we achieve here?

33
00:02:56,950 --> 00:03:04,330
We achieved basically the same thing that we had up here, but we now defined a specific role to play

34
00:03:04,330 --> 00:03:04,690
hide.

35
00:03:04,690 --> 00:03:09,060
For example, the navigation will have a height of 80 pixels, OK?

36
00:03:09,130 --> 00:03:10,990
And here we have only 80 pixels.

37
00:03:10,990 --> 00:03:14,620
And if we change this to, let's say, 200 pixels.

38
00:03:16,420 --> 00:03:17,240
And let's take a look.

39
00:03:17,260 --> 00:03:22,720
Everything else will be squished together because we have the next three rows as soon as changes back

40
00:03:22,720 --> 00:03:25,480
to 80 pixels, well, not 800.

41
00:03:27,850 --> 00:03:35,590
OK, and we can also change, for example, this one to 100 pixels and then it would be fixed and so

42
00:03:35,590 --> 00:03:36,280
forth and so on.

43
00:03:36,310 --> 00:03:40,300
OK, so that's pretty much it about the shorthand grid template.