minmax, auto-fit, & auto-fill

[00:00:00]
>> We are moving on to letter 8E MINMAX. Anyone ever heard of MinMax? What is MinMax? What does it look like?
>> I've used it for numbers, like math.that-
>> Okay, yeah, you use it in math for sure. We might say a minimum and a maximum inside of math, yeah.

[00:00:23]
>> I have seen it come across it like in CSS too.
>> Yeah, and you occasionally see it in CSS. As it says here, MinMax defines a sign with range greater than or equal to min and less than or equal to max, okay? So let us take a look at our Codepen and see what this thing is.

[00:00:45]
All right, so here in our Codepen, I have my container. I have three columns that are associated with my container. They're all 1FR, right, and we know exactly how this behaves. We're gonna have three evenly-sized columns. I don't have any media queries, so it's going to do its thing.

[00:01:09]
Basically, the skinniest it's gonna get is the longest word that's inside of our text. Consecutor, right here, that's the longest word. Or yeah, I guess that's the longest word. So that's the size of our boxes here when it gets small enough, okay. So MinMax would allow us to do the following.

[00:01:31]
So instead of making these all 1FR, let's just say if I make the first box this, MinMax 100 Pixels, comma, 200 pixels, and then 1FR, 1FR. Anyone wanna take a guess what that is gonna do?
>> It's not gonna get any smaller than 100 pixels wide, and it's not gonna get any bigger than 200.

[00:01:55]
>> Right, so that first column can be no less than 100 pixels and no more than 200 pixels. So what's gonna happen as I make my screen wider? What will happen to that blue box over here? it's gonna stay kind of skinny, right? And potentially the pink and the yellow ones are gonna get a lot fatter, right?

[00:02:16]
So let's just see if that happens. Sure enough, there we go, okay. And likewise, as we get smaller Look at that. When I get to this point, this must be 200 pixels wide or something, yeah? Everybody stops moving for a moment, while my blue box gets narrower, down to 100 pixels, notice it's ignoring the text, okay?

[00:02:48]
And then everybody starts getting smaller, and in fact, we'd start scrolling off screen. Okay, we can't get smaller than our word. How cool is that? All right, so that is something that can come in quite handy for various kinds of situations that you might have where you want to have a column that is gonna flex maybe only a tiny little bit, whereas the other columns may flex more freely.

[00:03:19]
So it's kind of like a responsive design effect that's happening anytime to one particular column here on the page. And people use this technique a lot for that kind of effect.
>> Why is the MinMax [COUGH] what can we do that's only affecting that first column?
>> Well, we can actually apply it to a to all the columns too.

[00:03:41]
That's what I was just about to do here.
>> Yeah, cuz I was just saying, cuz it's like that whole thing's wrapped in a div of a class of container and then-
>> Yeah, so let me type this out for you so you can see what it looks like.

[00:03:54]
So you could say repeat three, three, MinMax And then we could give it a range like this or we could say something like 200 pixels, 1FR, right? So never go skinnier than 200 pixels, but don't go larger than 1FR, right? Okay, so let's see what happens if we do that.

[00:04:28]
I broke something(
>> You need another-
>> I need it, thank you. Yep, I'm missing a parenthesis. Yep, there we go. That helps. All right, so let's see what happens. So these are basically 200 pixels wide. Yeah, and then they all start growing together. All right, so here we're gonna narrow down to 200 pixels.

[00:04:53]
And then we can't go any narrower, so we're just gonna start scrolling off the screen, okay?
>> So was it kind of, going back to your question, the MinMax is in place of like a third 1FR, instead of FR, FR, FR, the MinMax takes-
>> Yes, MinMax would be evaluated as the parameter for the width of that column.

[00:05:16]
>> That's why it's only for the first one.
>> Gotcha, yeah.
>> Right.
>> And then when you do repeat, it gets all of them, obviously.
>> Then it gets all of them, exactly, exactly. Yep, so the last thing I wanna demonstrate while we're here is the concept called auto fit and auto fill.

[00:05:32]
Okay, auto fit and auto fill. This will actually make grid kind of behave a little bit more like flexbox. [NOISE] Who knew that that was a thing. But let's see how that works here. So what I'm gonna do is I'm gonna say this, just to start, let's just try out the syntax.

[00:05:50]
So repeat, instead of saying three, I'm just gonna say auto-fit, MinMax 200 pixels, 1FR. Okay, so what I'm asking you to do is say, fit columns across the screen. I want them no narrower than 100 pixels no wider than 1FR. So what gonna happen as I make the screen bigger?

[00:06:14]
Anyone want to take a guess?
>> It's gonna get no wider than 1FR so that the next one's gonna go in to fill that space.
>> Exactly. So as I make this bigger, it's gonna grow until I have enough room to add one more column at 200 pixels wide.

[00:06:34]
Boom, there it is. And then it's gonna continue to grow until I have enough room to get another column in at 200 pixels wide. And it's gonna continue to stretch all the way across the screen. So you see how everybody's growing together. Okay, and now I'm gonna have to zoom out a little bit.

[00:06:57]
Okay, so if I start to squash these up again, it'll get narrower until we can't fit six 200 pixel wide boxes on the screen. In which case, one is gonna go to the next row and the rest of them are going to expand to fill that whole row.

[00:07:14]
See what I'm saying? Okay so we're gonna squash the boxes together until they get too narrow, we can't have it, drops to the next line, and the other boxes are gonna expand, right? So that is auto fit. What do you think autofill will do? We have no idea, autofill.

[00:07:43]
Okay, so if we do autofill, we're gonna get narrower and then we expand, narrower and expand, narrower and expand. So this is kind of Flexbox kind of behavior, right? So we start with all of our boxes on top of each other. As we get larger, then those boxes are just gonna continue to wrap onto another line.

[00:08:10]
When they're at least 200 pixels wide, then there's room for them. Just like that. Okay, but here's the difference. When this gets really wide, like it is here, see how we have the space over here on the side? So we don't have room anymore, we don't have any more columns to put there that are 200 pixels wide.

[00:08:37]
So what happens is we wind up with boxes that are going across the screen, but they're all the way over on the side like this. If I was to switch this from auto fill to auto fit. If I can see what I'm doing. It's very tiny. See, auto fit is gonna stretch those boxes to fill whatever space is available to them, whereas autofill will not.

[00:09:07]
So this is something that may be helpful to you, for those of you who are thinking about Flexbox and you're like, well, I really love my Flexbox. I love the fact that I can have an infinite number of boxes all in a row like this. Grid can kinda do that too and it would look like this.