1 00:00:00,680 --> 00:00:01,240 ‫Hey, there. 2 00:00:01,400 --> 00:00:02,120 ‫Welcome back. 3 00:00:02,300 --> 00:00:06,690 ‫Now in this lecture, let me quickly discuss allowed nested great. 4 00:00:07,190 --> 00:00:07,970 ‫What example? 5 00:00:07,970 --> 00:00:08,870 ‫We have this great. 6 00:00:09,170 --> 00:00:11,820 ‫But inside this great, we have multiple item. 7 00:00:11,870 --> 00:00:17,630 ‫So at this point of time, this is our item three instead of this item three has done. 8 00:00:17,870 --> 00:00:19,330 ‫Let me add multiple items. 9 00:00:19,340 --> 00:00:26,360 ‫Let me call this as their dog and let me call this as content on one. 10 00:00:26,690 --> 00:00:27,080 ‫OK. 11 00:00:27,620 --> 00:00:31,790 ‫So let me copy this whole div multiple times. 12 00:00:32,450 --> 00:00:33,320 ‫Save this one. 13 00:00:33,800 --> 00:00:36,080 ‫And since this, there is empty. 14 00:00:36,620 --> 00:00:43,040 ‫Let me also give some name maybe contain itself some common name so I can replicate things. 15 00:00:44,250 --> 00:00:44,750 ‫OK. 16 00:00:45,780 --> 00:00:49,740 ‫Let me jump here at the bottom and let me add this content. 17 00:00:50,760 --> 00:00:54,330 ‫Give some background color any background color. 18 00:00:55,230 --> 00:00:56,370 ‫Maybe just take one. 19 00:00:56,370 --> 00:00:57,190 ‫Save this one. 20 00:00:57,240 --> 00:01:01,260 ‫Nothing is going to be shown because it doesn't have any content. 21 00:01:02,960 --> 00:01:03,560 ‫I don't. 22 00:01:07,100 --> 00:01:08,210 ‫I am be. 23 00:01:10,360 --> 00:01:12,310 ‫Item C, save this one. 24 00:01:12,340 --> 00:01:19,270 ‫Get back here now how you can see this is Item A, B and C, and we are following something similar 25 00:01:19,270 --> 00:01:21,130 ‫like we did at the initial stage. 26 00:01:21,550 --> 00:01:28,330 ‫Now remember one thing at this point of time, we are following a flow, not by default. 27 00:01:28,330 --> 00:01:34,060 ‫Flow of this whole grid system is top to bottom, which is going to be about our column. 28 00:01:34,600 --> 00:01:39,640 ‫We can change this flawed the initial level itself with when we were working with our whole grid thing, 29 00:01:39,940 --> 00:01:43,750 ‫with the basic example, and we can change this flow here also. 30 00:01:44,080 --> 00:01:47,760 ‫But at this point of time, we haven't said that this is a great honor. 31 00:01:47,780 --> 00:01:50,290 ‫This item three at this point of time is not great. 32 00:01:50,860 --> 00:01:52,360 ‫This is a normal flow. 33 00:01:52,360 --> 00:01:54,640 ‫One Block system display block. 34 00:01:54,940 --> 00:02:00,250 ‫So let me first change this item to grid and let me call this as display. 35 00:02:01,950 --> 00:02:02,940 ‫As great. 36 00:02:04,590 --> 00:02:05,460 ‫Save this one. 37 00:02:06,150 --> 00:02:10,110 ‫Now this is following the flow of coal creating a jumper. 38 00:02:10,500 --> 00:02:12,370 ‫This is our great click here. 39 00:02:12,390 --> 00:02:18,980 ‫You can see all the patterns that we already discussed and if you see it on one item to an item three. 40 00:02:19,530 --> 00:02:21,600 ‫Now let me try to change the flow. 41 00:02:21,600 --> 00:02:26,940 ‫At this point of time, we are following the flow off column, but I can change if lawyer. 42 00:02:28,780 --> 00:02:31,200 ‫We just need to mention great. 43 00:02:33,200 --> 00:02:34,010 ‫Sort of low. 44 00:02:34,250 --> 00:02:36,200 ‫And by default, it does roll. 45 00:02:36,350 --> 00:02:39,960 ‫So let me change this one and try a column and if I save this one? 46 00:02:39,980 --> 00:02:40,730 ‫Get back here. 47 00:02:41,600 --> 00:02:44,350 ‫Now you can see this is column, so. 48 00:02:44,600 --> 00:02:50,420 ‫Item one is here, then item two, then item three so that our floor can change. 49 00:02:50,540 --> 00:02:55,400 ‫By default, we are following a floor rule that means top to bottom. 50 00:02:55,760 --> 00:02:58,910 ‫Now we are following a floor left to right. 51 00:02:59,300 --> 00:02:59,760 ‫OK. 52 00:02:59,780 --> 00:03:00,950 ‫I hope you got the idea. 53 00:03:01,550 --> 00:03:04,250 ‫So this is one property that I really wanted to discuss. 54 00:03:04,250 --> 00:03:05,890 ‫But here, remember, this is great. 55 00:03:06,000 --> 00:03:11,480 ‫Now this whole item three, we can play with all type of content actually on one. 56 00:03:12,020 --> 00:03:14,990 ‫And this is what we do, and this is going to be three. 57 00:03:15,500 --> 00:03:16,520 ‫We can play with them. 58 00:03:17,240 --> 00:03:19,780 ‫So maybe I want to try something else. 59 00:03:19,790 --> 00:03:21,740 ‫Maybe I want to change the layout. 60 00:03:22,010 --> 00:03:25,400 ‫I want it to be at the top and then BNC. 61 00:03:25,850 --> 00:03:31,490 ‫So the first thing I can show here is I can add information like Let me go to Android. 62 00:03:31,490 --> 00:03:33,320 ‫So that is the default value. 63 00:03:35,060 --> 00:03:42,090 ‫So I'm going to utilize great template and great template area or jump on to item three and add grain 64 00:03:42,760 --> 00:03:43,550 ‫and play. 65 00:03:44,770 --> 00:03:52,300 ‫Now, what I'm going to utilize is, let's say, since we only need to hold them, so that's one effort 66 00:03:52,300 --> 00:03:53,260 ‫and we're far. 67 00:03:54,320 --> 00:03:57,950 ‫And then we need to go along with just one effort and one effort. 68 00:03:58,070 --> 00:03:59,480 ‫OK, this looks great. 69 00:04:00,420 --> 00:04:06,530 ‫I had this is the current look, but what I need is to be extended from here to here then BNZ. 70 00:04:06,890 --> 00:04:07,280 ‫OK. 71 00:04:07,760 --> 00:04:15,710 ‫So either I can utilize this whole grid column start and everything else, or I can utilize grid template. 72 00:04:17,130 --> 00:04:22,830 ‫Areas and then I can define, OK, the first one is going to be, I need to give a name. 73 00:04:22,920 --> 00:04:25,170 ‫I'm going to call this as contained one. 74 00:04:26,730 --> 00:04:27,870 ‫Green one. 75 00:04:28,960 --> 00:04:31,630 ‫And then the second will be my constant. 76 00:04:33,520 --> 00:04:33,880 ‫Do. 77 00:04:36,200 --> 00:04:41,480 ‫And then content three, OK, at this point of time, I haven't given them names, so I need to do that. 78 00:04:42,830 --> 00:04:45,800 ‫Let me copy this child first. 79 00:04:47,940 --> 00:04:53,610 ‫And give them a name which is going to be about great idea, and I'm going to give this a name similar 80 00:04:53,610 --> 00:04:54,720 ‫to the class name. 81 00:04:55,320 --> 00:04:57,780 ‫And I just need to replicate this through nine. 82 00:05:00,330 --> 00:05:02,700 ‫Two three. 83 00:05:04,190 --> 00:05:06,360 ‫Two and three. 84 00:05:06,380 --> 00:05:07,940 ‫See this one. 85 00:05:10,870 --> 00:05:14,170 ‫Get back here, you can see how this is going to work. 86 00:05:15,980 --> 00:05:20,480 ‫So this is contained one content, two content, three. 87 00:05:20,960 --> 00:05:24,770 ‫Now I should mention some gaps so we can see some difference. 88 00:05:25,160 --> 00:05:33,920 ‫So this is going to be great gap and I'm going to utilize one, but I should say and excel for all. 89 00:05:34,130 --> 00:05:34,920 ‫Save this one. 90 00:05:34,940 --> 00:05:35,660 ‫Get back in. 91 00:05:36,230 --> 00:05:39,890 ‫Now, I hope you got the idea how we can visualize them. 92 00:05:40,670 --> 00:05:45,770 ‫So that's all we can also try the four things we can all to mess things up. 93 00:05:46,040 --> 00:05:48,710 ‫But that's the basic idea how you can test things. 94 00:05:49,070 --> 00:05:54,110 ‫Now you can add some padding margin and play with things according to your requirement. 95 00:05:54,110 --> 00:05:55,430 ‫But that's all nested. 96 00:05:55,430 --> 00:05:56,960 ‫Thinks we're going to work. 97 00:05:57,350 --> 00:06:05,360 ‫That means we created this parent as great, and then all the child is controlled by the grade properties. 98 00:06:05,870 --> 00:06:08,220 ‫So that's all for this lecture in the next one. 99 00:06:08,480 --> 00:06:15,800 ‫Yeah, I want to discuss about the old friend that a lot of friends from justified content online sell 100 00:06:15,800 --> 00:06:19,670 ‫for online content and fuel their stuff and then wrap up this whole section. 101 00:06:20,180 --> 00:06:23,000 ‫So thank you for calling, and I see you guys in the next one.