auto-fit vs auto-fill

[00:00:00]
>> Kevin Powell: Now when I was first setting that up, I mentioned there were two options. We have auto-fit or autofill when we don't know how many columns we want, and a lot of people mix them up. It's again, pick one, if it was the wrong one, switch to the other one. I tend to default to auto-fit, and then in the situations where it's not the right one, I go to the other one. If you have a lot of elements, you're not going to see a difference between them.

[00:00:23]
So if I'm switching here between autofit autofill, it looks identical, which is another reason people mix them up because it feels like they're the same thing. Where they are not the same thing as if you have empty space that's left over. So if I'm using a, it's a bit more complicated, my grid here, but we'll look at it in a second. But if I use the auto-fit keyword, it will fit the content like we saw before, where it will shrink and grow, but they're always going to fill the space.

[00:00:48]
There's not a lot of elements, they're just going to fill up that entire area. We're going to turn on our dev tools because we're using grid and it makes life easier. Let's hope I can find that grid without too much work here. I think it's this one. Turn off responsive mode, and OK. And I'm going to undock my dev tools just so they're not getting in the way. And there we go. So with auto-fit, it will create a new column for every element, but if there's leftover space, those columns will just continue to get wider.

[00:01:21]
If you're using autofill, it's going to continue making new columns even though they're empty, if it can. So once it's like, oh I can fit another 200 pixel column in here, so it inserts that column even though the content's empty. This feels a little bit strange when you first see it, because you're like, why would I want it creating empty columns. But if you have a feature like this or something where you're filtering through results.

[00:01:46]
If you have 8 things at the beginning and then the user switches to having they choose a filter that narrows it down to only having 3, it's really weird if the layout switches. It's much more normal for it just to stay like this and there's empty space on the side. It's not going to feel like a strange behavior to the user. So. Yeah, that's the main difference between them. And again, try autofit.

[00:02:06]
If it's not doing what you want it to, you switch to autofill and vice versa, and you have lots of content, you won't actually see a difference between the two of them. And as a quick reminder before we get into media queries. Grid and flex are best friends. They work well together. We're doing intrinsic layouts. We're doing this one again, building in the display of flex, the muscle memory here, display flex gap 10 pixels.

[00:02:37]
I want it to not overflow, flex wrap, wrap. And the inner part works, and now we get an intrinsic flexbox going in there, and then on the outside, I had my auto grid this time, not a regular grid, we'll use our auto grid. And we create a class up here, auto grid. Display grid, gap 21 pixels, grid-template-columns and you come in with your long declaration template columns, repeat, auto-fit, comma, minmax.

[00:03:22]
We need a minimum value, minimum value, min function, comma one fr. Inside the min function, we want a minimum size, we'll say 300 pixels this time, and every single other time it will always be 100% there. Now, on the outside, we have an intrinsic grid where the layout's adapting to what we need, and as those columns are changing and adapting, we have an inner flexbox grid that's adapting and changing to what it has going on.

[00:03:48]
And I don't have to worry about how this is working, when things are happening, it's based on the constraints that I'm setting for the browser, and everything works really well. This is why I think intrinsic layouts should be the first line of attack. Really quickly before we move on, just additional resources for this lesson. I would really encourage you, if you have some time to spare to listen to the designing intrinsic layouts talk by Jen Simmons.

[00:04:10]
It is an hour long-ish, so it is a bit of a time commitment for it, but she really goes through a lot of really cool patterns and other stuff that we can be using with min and max and other stuff, a lot of intrinsic patterns in there. It's a really good talk to get into the mindset of working with them. And there's a nice intrinsic sizing in CSS by Ahmad Shadeed. This is more about using the fit-content, max-content, min-content, and a few other things in there, and he just has fantastic interactive articles, so his blog is a really good place to check out if you're looking for more CSS resources.