1 00:00:00,450 --> 00:00:01,110 ‫Hey, there. 2 00:00:01,170 --> 00:00:01,890 ‫Welcome back. 3 00:00:02,160 --> 00:00:09,090 ‫Now in this lecture, let us discuss about two concepts which are known as auto fit, as well as autofill. 4 00:00:09,900 --> 00:00:15,270 ‫So at this point of time, I have cleaned everything and I just have the initial setup. 5 00:00:15,600 --> 00:00:23,270 ‫That means I have this display grid and this grid template columns and I have three columns rest. 6 00:00:23,280 --> 00:00:24,570 ‫Everything is cleaned up. 7 00:00:24,960 --> 00:00:25,520 ‫That's it. 8 00:00:25,530 --> 00:00:27,570 ‫So I have a cleaned up setup. 9 00:00:28,200 --> 00:00:31,560 ‫Now what I'm going to discuss is something similar to that. 10 00:00:31,740 --> 00:00:38,970 ‫So if you remember when I was trying to just minimize this, all of them asked if that means they are 11 00:00:39,570 --> 00:00:42,630 ‫building towards their whole row and column. 12 00:00:42,990 --> 00:00:48,720 ‫So if I try to decrease the size of my screen, I want to get them into raw format. 13 00:00:48,840 --> 00:00:52,140 ‫At this point of time, I don't want to squeeze them like this. 14 00:00:52,680 --> 00:00:56,880 ‫So that's where this whole auto fit and autofill concept come into picture. 15 00:00:57,510 --> 00:01:01,550 ‫For example, at this point of time, I'm utilizing this one fan here. 16 00:01:01,560 --> 00:01:06,960 ‫What I can do is I can utilize for now, I can utilize repeat three times. 17 00:01:09,000 --> 00:01:09,740 ‫One, if I. 18 00:01:11,100 --> 00:01:18,180 ‫I can utilize this and everything is going to remain same, but here instead of three, I can utilize. 19 00:01:20,490 --> 00:01:30,240 ‫Auto Dash, Fred, that means all the elements that will fit with this particular size will settle here. 20 00:01:30,330 --> 00:01:36,300 ‫So at this point of time, we have provided one effort that is going to take complete with, but if 21 00:01:36,300 --> 00:01:38,910 ‫I say maybe 100 pixel. 22 00:01:41,140 --> 00:01:44,910 ‫It will try to fit all the elements in the form of one hundred percent. 23 00:01:45,550 --> 00:01:46,570 ‫You can see this one. 24 00:01:46,810 --> 00:01:48,610 ‫It is similar to Rob, actually. 25 00:01:49,210 --> 00:01:54,940 ‫But, but but here we can do one thing we can provide min max value so I can provide a value in the 26 00:01:54,940 --> 00:01:56,140 ‫form of Min Max. 27 00:01:56,500 --> 00:02:03,160 ‫This is also going to take to value the minimum value that I want, which is going to be maybe 100 percent, 28 00:02:03,160 --> 00:02:04,030 ‫for example. 29 00:02:04,360 --> 00:02:09,400 ‫And the maximum value I want is one effort to save this one. 30 00:02:09,520 --> 00:02:10,340 ‫Goodbye, cat. 31 00:02:10,900 --> 00:02:15,820 ‫Now here you can see if I try to increase the full size you can see. 32 00:02:16,390 --> 00:02:21,400 ‫So how do we have six element and all of them tried to capture the maximum possible size? 33 00:02:21,790 --> 00:02:25,540 ‫Let me change the 250 again, so you will have better view. 34 00:02:26,080 --> 00:02:30,030 ‫OK, so now they are working according to the one fine method. 35 00:02:30,040 --> 00:02:36,310 ‫But if I try to minimize them as soon as they touch 50 pixel, you will see item going down. 36 00:02:38,960 --> 00:02:40,700 ‫OK, I hope you got the idea. 37 00:02:41,390 --> 00:02:43,040 ‫Let me go back with 100 now. 38 00:02:44,410 --> 00:02:45,280 ‫Save this one. 39 00:02:45,550 --> 00:02:49,110 ‫Get back here now as soon as they touch 100 pixels. 40 00:02:49,480 --> 00:02:50,380 ‫They will get down. 41 00:02:51,720 --> 00:02:55,530 ‫So that's all this is going to work, and later on, we will add some gaps here. 42 00:02:55,710 --> 00:02:57,050 ‫I don't worry about this. 43 00:02:57,060 --> 00:02:58,950 ‫We have a large gap between both of them. 44 00:02:59,340 --> 00:03:07,110 ‫So what we have to do is I have to use rule gap and I'm going to give it then pixel as well as I'm going 45 00:03:07,110 --> 00:03:08,670 ‫to use column gap. 46 00:03:10,650 --> 00:03:14,760 ‫And we need to use 10 pixels, save this one. 47 00:03:14,790 --> 00:03:15,570 ‫Goodbye, cat. 48 00:03:16,500 --> 00:03:18,750 ‫Now you can see that's how it is going to work. 49 00:03:23,320 --> 00:03:26,890 ‫Now you can give them a minimum value as well as maximum value. 50 00:03:27,100 --> 00:03:31,270 ‫So usually I try to give them around 350 and save this one. 51 00:03:31,300 --> 00:03:36,100 ‫Here you can see with three 50, you get this type of screen, which is perfect. 52 00:03:36,430 --> 00:03:43,210 ‫Now you can change them maybe 320 to 80, something similar if you want to divide them into three columns 53 00:03:43,210 --> 00:03:43,990 ‫or two columns. 54 00:03:44,440 --> 00:03:46,480 ‫So you're going to stick them around three column. 55 00:03:46,490 --> 00:03:54,010 ‫But if I try to decrease the size now, you can see all of them are moving in the form of prop now as 56 00:03:54,010 --> 00:03:56,080 ‫soon as I decrease some size. 57 00:03:56,410 --> 00:03:57,880 ‫And that's what it is going to work. 58 00:03:58,240 --> 00:04:01,480 ‫But the maximum it is following is one effort. 59 00:04:02,140 --> 00:04:07,450 ‫Remember, this is wonderful, actually, and minimum it can go till 280. 60 00:04:09,990 --> 00:04:13,050 ‫So at 591, we are breaking. 61 00:04:14,480 --> 00:04:17,780 ‫Because we are following the multiple of this to it, actually. 62 00:04:18,050 --> 00:04:24,970 ‫So when it is able to fit two items, it is going to fit two items as soon as it realizes that, OK, 63 00:04:24,980 --> 00:04:26,390 ‫there is some issue with two item. 64 00:04:26,990 --> 00:04:28,050 ‫It is going to jump. 65 00:04:28,370 --> 00:04:29,930 ‫And that's how this is going to work. 66 00:04:30,680 --> 00:04:32,010 ‫So this is sort of it. 67 00:04:32,030 --> 00:04:34,880 ‫That means it will try to fit the maximum value. 68 00:04:35,240 --> 00:04:37,400 ‫But there is another one which is autofill. 69 00:04:37,880 --> 00:04:43,480 ‫If I take autofill and try to give 50 bucks an hour here and if I jump ahead. 70 00:04:43,820 --> 00:04:50,060 ‫Now, if you see it is not trying to cover the maximum position, what autofill is trying to do is whatever 71 00:04:50,060 --> 00:04:54,410 ‫they space is available, they are going to sell the item according to this value. 72 00:04:55,250 --> 00:04:57,650 ‫So if I just try to minimize this one. 73 00:05:00,070 --> 00:05:00,670 ‫You can see. 74 00:05:01,750 --> 00:05:04,090 ‫Autofill is not even trying to expand. 75 00:05:04,810 --> 00:05:06,580 ‫But if I use autofill fitted. 76 00:05:08,740 --> 00:05:09,700 ‫Save this one. 77 00:05:09,730 --> 00:05:16,510 ‫Get back here, you can see it will depend on these two value, which is the minimum as well as the 78 00:05:16,510 --> 00:05:19,120 ‫maximum if this space is available. 79 00:05:19,210 --> 00:05:23,470 ‫It will try towards the maximum remember with auto fit. 80 00:05:23,890 --> 00:05:28,030 ‫We will try to move towards the maximum with autofill. 81 00:05:29,350 --> 00:05:31,720 ‫We will just depend on our minimum. 82 00:05:32,320 --> 00:05:34,520 ‫We try to depend on auto of it and sort of. 83 00:05:35,290 --> 00:05:36,910 ‫So that's how this is going to work. 84 00:05:37,120 --> 00:05:38,470 ‫I hope you got the idea. 85 00:05:38,640 --> 00:05:40,630 ‫And let me just go to 200 something. 86 00:05:40,780 --> 00:05:44,920 ‫So it's better to visualize it back here. 87 00:05:46,510 --> 00:05:53,350 ‫Now here you can see all our item is able to fit her and never try to minimize, it's working perfectly 88 00:05:53,350 --> 00:05:53,710 ‫fine. 89 00:05:55,170 --> 00:05:59,460 ‫Now here we can also play with our rules, but that we will do a later part. 90 00:05:59,940 --> 00:06:02,970 ‫I hope you got the idea about this sort of it and autofill. 91 00:06:03,270 --> 00:06:10,530 ‫It's just utilized to wrap things as we already did with our Flexbox so we can wrap things and we can 92 00:06:10,530 --> 00:06:17,100 ‫define what is the minimum value that we need to tolerate and the maximum value in which we can stretch. 93 00:06:17,930 --> 00:06:22,590 ‫Now, if by any chance, suppose we only had these three item. 94 00:06:22,960 --> 00:06:27,420 ‫Now if you see all of this space is covered by these three item. 95 00:06:30,170 --> 00:06:32,480 ‫But if here I use autofill. 96 00:06:33,860 --> 00:06:34,760 ‫Save this one. 97 00:06:35,630 --> 00:06:38,180 ‫You can see they have some empty space. 98 00:06:39,920 --> 00:06:46,100 ‫Now, one interesting visual, I want to show how it is like me, I create the template rules and let 99 00:06:46,100 --> 00:06:49,760 ‫me say one on one effort and one after save this one. 100 00:06:50,720 --> 00:06:53,840 ‫Now here we have three columns, so I want to show something. 101 00:06:54,050 --> 00:07:01,280 ‫And if I try to hear, if you see, if I try to decrease the size and now increase this. 102 00:07:04,850 --> 00:07:06,110 ‫This sudden break. 103 00:07:06,800 --> 00:07:11,890 ‫What happened is this phase is equal to one new item space, actually. 104 00:07:12,260 --> 00:07:13,280 ‫This whole space. 105 00:07:13,970 --> 00:07:17,930 ‫So that's how this space is calculated, basically behind the scene. 106 00:07:18,200 --> 00:07:21,320 ‫That's how this space is calculated if I click on this, correct? 107 00:07:21,710 --> 00:07:25,100 ‫So this is an empty space which can handle a new item. 108 00:07:25,500 --> 00:07:27,130 ‫Remember, this is our top. 109 00:07:27,830 --> 00:07:31,260 ‫If I use our profit, save this one in backyard. 110 00:07:32,180 --> 00:07:33,260 ‫It stretched out. 111 00:07:33,920 --> 00:07:34,550 ‫So that's all. 112 00:07:34,940 --> 00:07:38,540 ‫I hope you got the idea how we are going to utilize both of them. 113 00:07:40,080 --> 00:07:45,600 ‫You don't need to remember that, to be honest, as you grow, as you walk, you will understand them. 114 00:07:45,990 --> 00:07:49,170 ‫So that's all for this lecture and I see you guys in the next one.