Variable columns

- [Instructor] Next we'll look at auto-fill and auto-fit. These properties are really useful for making a responsive layout because they let you have a variable amount of columns. Here we have a container div with a bunch of items inside it. Let's say we're making something like a photo gallery where every item will be the same width. We know we need to have multiple columns but we don't know how many because it will be different depending on the width of the view port. So looking at the code, I'm going to add some CSS here on the container element line 12.

Gonna do grid, template columns to set the number of columns. Then I'm gonna do repeat with parenthesis. Instead of starting with a number for the amount of times I want it to repeat, I'm gonna start with auto dash fill and then comma, and then 150 pixels for the width of each column. Going over here I refresh and I can see I have 150 pixel width columns. But the thing that's different here is it makes a different number of columns depending how much space there is.

So if I change the width of the browser window, there's a different number of columns. Now you'll notice that the columns don't go all the way to the edge of the container. As we saw in a previous video we can use justify content to space them out to take the full amount of horizontal space in the grid. So back here in the code on line 13, I'm gonna add justify content and then space between, save and refresh. That's okay but the problem with it is you have all this extra space between columns which is kind of wasted space.

You might just wanna have your grid items be larger to take up that space. We're gonna use something called minmax to tell the browser the minimum and the maximum width that a column can be. Going back to line 12 I already have grid-template-columns, repeat and auto-fill. So instead of 150 pixels for the width of each column, I'm gonna type minmax and then another set of parenthesis and then I'm gonna have the minimum and maximum amount separated by a comma.

So my minimum is gonna be 150 pixels and then comma maximum one fr. Every column will be at least 150 pixels wide but can be up to one fr wide if there's enough space. So you can see this most easily if you only start with a few columns. I'm going to refresh, go over here to narrow where there's only one column because there's only space for one column. If you make it a little bit wider, it expands until it goes up to the amount of space where it can fit two columns.

So now it has two columns of 150 pixels each. You make it wider again and they get larger. Remember their maximum is one fr up until there's space for three columns that are 150 pixels wide. Now to show you the difference between auto-fill and auto-fit, it's a little bit complicated. And to show this I'm gonna take out most of these grid items and only leave the first three in here. I'm deleting these, now I just have three grid items.

And I'm gonna go up here and change auto-fill to auto-fit. And save. So I'm gonna go over here and you can see that it's only making three columns because that's all that I have content for. Okay if I have this be auto-fill, and I go over here and refresh, now it's making empty columns when there's space for 150 pixel wide columns even though there's not content to put in them. So that's the difference between auto-fill and auto-fit.

You don't have to use minmax only with auto-fill. So I'm gonna go in here and change grid-template-columns, take all that out and I'm gonna set up a few different columns. I'm gonna do 50 pixels for the first one. The next column, minmax with parenthesis, minimum of 100 pixels comma maximum one fr. A space after the parenthesis and then minmax again inside the parenthesis, 70 pixels comma 1 fr for the minimum and maximum.

Going over here to refresh, the first column's going to be 50 pixels no matter what. The second, a minimum of 100 pixels and a max of one fr. And the third, a minimum of 70 pixels and a max of one fr. If I go over here to make the grid really narrow, you can see that second and third column are 100 pixels and 70 pixels. As I expand the window I can see that they keep expanding because their maximum is one fr.