‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us discuss about two concepts which are known as auto fit, as well as autofill.
‫So at this point of time, I have cleaned everything and I just have the initial setup.
‫That means I have this display grid and this grid template columns and I have three columns rest.
‫Everything is cleaned up.
‫That's it.
‫So I have a cleaned up setup.
‫Now what I'm going to discuss is something similar to that.
‫So if you remember when I was trying to just minimize this, all of them asked if that means they are
‫building towards their whole row and column.
‫So if I try to decrease the size of my screen, I want to get them into raw format.
‫At this point of time, I don't want to squeeze them like this.
‫So that's where this whole auto fit and autofill concept come into picture.
‫For example, at this point of time, I'm utilizing this one fan here.
‫What I can do is I can utilize for now, I can utilize repeat three times.
‫One, if I.
‫I can utilize this and everything is going to remain same, but here instead of three, I can utilize.
‫Auto Dash, Fred, that means all the elements that will fit with this particular size will settle here.
‫So at this point of time, we have provided one effort that is going to take complete with, but if
‫I say maybe 100 pixel.
‫It will try to fit all the elements in the form of one hundred percent.
‫You can see this one.
‫It is similar to Rob, actually.
‫But, but but here we can do one thing we can provide min max value so I can provide a value in the
‫form of Min Max.
‫This is also going to take to value the minimum value that I want, which is going to be maybe 100 percent,
‫for example.
‫And the maximum value I want is one effort to save this one.
‫Goodbye, cat.
‫Now here you can see if I try to increase the full size you can see.
‫So how do we have six element and all of them tried to capture the maximum possible size?
‫Let me change the 250 again, so you will have better view.
‫OK, so now they are working according to the one fine method.
‫But if I try to minimize them as soon as they touch 50 pixel, you will see item going down.
‫OK, I hope you got the idea.
‫Let me go back with 100 now.
‫Save this one.
‫Get back here now as soon as they touch 100 pixels.
‫They will get down.
‫So that's all this is going to work, and later on, we will add some gaps here.
‫I don't worry about this.
‫We have a large gap between both of them.
‫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
‫to use column gap.
‫And we need to use 10 pixels, save this one.
‫Goodbye, cat.
‫Now you can see that's how it is going to work.
‫Now you can give them a minimum value as well as maximum value.
‫So usually I try to give them around 350 and save this one.
‫Here you can see with three 50, you get this type of screen, which is perfect.
‫Now you can change them maybe 320 to 80, something similar if you want to divide them into three columns
‫or two columns.
‫So you're going to stick them around three column.
‫But if I try to decrease the size now, you can see all of them are moving in the form of prop now as
‫soon as I decrease some size.
‫And that's what it is going to work.
‫But the maximum it is following is one effort.
‫Remember, this is wonderful, actually, and minimum it can go till 280.
‫So at 591, we are breaking.
‫Because we are following the multiple of this to it, actually.
‫So when it is able to fit two items, it is going to fit two items as soon as it realizes that, OK,
‫there is some issue with two item.
‫It is going to jump.
‫And that's how this is going to work.
‫So this is sort of it.
‫That means it will try to fit the maximum value.
‫But there is another one which is autofill.
‫If I take autofill and try to give 50 bucks an hour here and if I jump ahead.
‫Now, if you see it is not trying to cover the maximum position, what autofill is trying to do is whatever
‫they space is available, they are going to sell the item according to this value.
‫So if I just try to minimize this one.
‫You can see.
‫Autofill is not even trying to expand.
‫But if I use autofill fitted.
‫Save this one.
‫Get back here, you can see it will depend on these two value, which is the minimum as well as the
‫maximum if this space is available.
‫It will try towards the maximum remember with auto fit.
‫We will try to move towards the maximum with autofill.
‫We will just depend on our minimum.
‫We try to depend on auto of it and sort of.
‫So that's how this is going to work.
‫I hope you got the idea.
‫And let me just go to 200 something.
‫So it's better to visualize it back here.
‫Now here you can see all our item is able to fit her and never try to minimize, it's working perfectly
‫fine.
‫Now here we can also play with our rules, but that we will do a later part.
‫I hope you got the idea about this sort of it and autofill.
‫It's just utilized to wrap things as we already did with our Flexbox so we can wrap things and we can
‫define what is the minimum value that we need to tolerate and the maximum value in which we can stretch.
‫Now, if by any chance, suppose we only had these three item.
‫Now if you see all of this space is covered by these three item.
‫But if here I use autofill.
‫Save this one.
‫You can see they have some empty space.
‫Now, one interesting visual, I want to show how it is like me, I create the template rules and let
‫me say one on one effort and one after save this one.
‫Now here we have three columns, so I want to show something.
‫And if I try to hear, if you see, if I try to decrease the size and now increase this.
‫This sudden break.
‫What happened is this phase is equal to one new item space, actually.
‫This whole space.
‫So that's how this space is calculated, basically behind the scene.
‫That's how this space is calculated if I click on this, correct?
‫So this is an empty space which can handle a new item.
‫Remember, this is our top.
‫If I use our profit, save this one in backyard.
‫It stretched out.
‫So that's all.
‫I hope you got the idea how we are going to utilize both of them.
‫You don't need to remember that, to be honest, as you grow, as you walk, you will understand them.
‫So that's all for this lecture and I see you guys in the next one.