1 00:00:00,660 --> 00:00:07,110 Next up, we learn about great template area by defining something as great template area, you're referencing 2 00:00:07,110 --> 00:00:13,080 the names of the grid areas which are specified with a grid, a property repeating the name of the grid 3 00:00:13,080 --> 00:00:15,870 area causes the content to span those cells. 4 00:00:17,550 --> 00:00:25,800 A period signifies the empty cell, the syntax itself provides a visualization of the structure of the 5 00:00:25,800 --> 00:00:26,080 grid. 6 00:00:26,640 --> 00:00:27,650 So let's try this out. 7 00:00:28,740 --> 00:00:31,080 Let's jump in here, comment template area. 8 00:00:32,670 --> 00:00:39,050 First of all, I want to show you how the syntax looks, so actually going to do this in another comment. 9 00:00:39,430 --> 00:00:45,060 It's a great template area and this will contain the grid area name. 10 00:00:49,340 --> 00:00:56,510 Then this would be a kind of a column and then will, for example, with a period empty cell and then 11 00:00:56,510 --> 00:00:57,410 a not a cell. 12 00:01:00,140 --> 00:01:04,200 For example, none, and then will come another cell. 13 00:01:05,270 --> 00:01:12,260 Now, the first thing that we need to do is to define the items of the great container as what they 14 00:01:12,260 --> 00:01:15,150 will be or otherwise we need to give them a name. 15 00:01:15,590 --> 00:01:21,770 So, for example, let's see, we're going to take the class of MIT, contain a grade item. 16 00:01:22,460 --> 00:01:24,440 Now we're going to select the ninth child. 17 00:01:24,440 --> 00:01:26,570 And this just goes with the first child. 18 00:01:27,260 --> 00:01:35,200 And for this first child, we'll give it a grade area, name of net. 19 00:01:36,150 --> 00:01:40,000 OK, now we can repeat the same thing for all six areas. 20 00:01:40,400 --> 00:01:44,070 So let's go and copy the segment five more times. 21 00:01:44,080 --> 00:01:48,450 One, two, three, four, five, and let's go through them. 22 00:01:48,470 --> 00:01:52,070 So this would be number two and I say this would be the header. 23 00:01:53,030 --> 00:01:54,920 Then we'll have eight main. 24 00:01:58,070 --> 00:01:58,970 Then a section. 25 00:02:04,090 --> 00:02:06,610 Then let's say we have an aside 26 00:02:09,040 --> 00:02:18,820 and last but not least, a photo, which is second, we need to change this to three days to four days 27 00:02:18,820 --> 00:02:21,800 with a fifth child and the sixth child. 28 00:02:22,240 --> 00:02:26,140 So basically what we're doing, we're selecting these items. 29 00:02:26,470 --> 00:02:35,590 Let me open this up once more and it's open up our inspector again, because now we can take our great 30 00:02:35,590 --> 00:02:36,220 container. 31 00:02:37,590 --> 00:02:39,840 And this fossil display has great. 32 00:02:45,280 --> 00:02:51,040 Although we have it displayed up here somewhere as great, but I want to have this I want you to have 33 00:02:51,040 --> 00:02:57,100 this entire code in one specific area now will say great template columns. 34 00:02:57,610 --> 00:03:02,710 It should have four columns or repeat four times one for. 35 00:03:04,370 --> 00:03:06,020 What does one of four. 36 00:03:09,780 --> 00:03:12,900 Therefore, the rules will set them automatically. 37 00:03:18,620 --> 00:03:26,900 So set auto, and now we can draw out our great template area to step in grid template. 38 00:03:29,370 --> 00:03:30,480 And Arya. 39 00:03:32,760 --> 00:03:42,550 I'm going to go not no name down here, and we think quotations, first of all, the up the upper side 40 00:03:42,550 --> 00:03:45,040 right here want to have a navigation. 41 00:03:46,390 --> 00:03:54,370 OK, so I'm going to type in four times now and with spaces between them, and this just means that 42 00:03:54,370 --> 00:04:02,620 the first item will occupy the upper space with the navigation because it is already happening here. 43 00:04:04,890 --> 00:04:09,210 So first item will be basically occupying the entire space as a nav bar. 44 00:04:12,830 --> 00:04:16,010 Then on a second row, so let's go down here. 45 00:04:18,750 --> 00:04:25,680 Once again, between quotations, who said you would say that it should have a side, then it should 46 00:04:25,680 --> 00:04:33,690 come a header and the header will spin out there, I'm going to spin out the header on three columns, 47 00:04:33,690 --> 00:04:34,950 one, two and three. 48 00:04:38,330 --> 00:04:45,500 Now, after this, I want that aside to spend down two more columns, so I'm going to come up with this. 49 00:04:46,520 --> 00:04:49,960 I actually am not going to copy this, so don't get confused. 50 00:04:49,990 --> 00:04:53,050 So underneath this aren't going to have an inside again. 51 00:04:53,590 --> 00:04:57,430 Then the main section, we just pan out over two columns. 52 00:05:01,030 --> 00:05:02,590 And then MDL. 53 00:05:04,350 --> 00:05:11,940 OK, after this, we're going to have another roll with the first column being a site, then a section. 54 00:05:15,520 --> 00:05:22,720 Then a section again and then empty MDL, certainly so save this. 55 00:05:22,750 --> 00:05:23,830 Let's see how it looks. 56 00:05:23,860 --> 00:05:27,500 OK, so I we see exactly like we typed it out. 57 00:05:27,880 --> 00:05:31,720 We have up here in navigation, which is the item number one. 58 00:05:32,410 --> 00:05:39,820 Then down here on the next row we have a side and three columns of header kaso aside. 59 00:05:39,820 --> 00:05:40,840 One, two, three. 60 00:05:40,850 --> 00:05:42,880 The second item with header. 61 00:05:44,780 --> 00:05:50,750 And you can run the side was the fifth item that we have assigned and maintain two columns and then 62 00:05:50,750 --> 00:05:56,720 an empty cell, so Heather, a side main main and then an empty cell. 63 00:05:57,170 --> 00:05:58,880 And then we have a side section section. 64 00:05:59,180 --> 00:06:05,080 And the last thing we want to do to spin out the entire Bahram column with a footer tonight to type 65 00:06:05,090 --> 00:06:07,760 in footer and copy it four times. 66 00:06:08,480 --> 00:06:09,260 Three times what? 67 00:06:09,260 --> 00:06:14,930 We will have it four times then in our Bottoms column about Ambros. 68 00:06:15,320 --> 00:06:17,020 So, yeah, there we go. 69 00:06:17,660 --> 00:06:20,270 This is how we can use great template area.