0:00 Next up, we'll see a magical way of creating a responsive grid layout, where we use a special keyword called auto-fit. We'll also talk about one called auto-fill. Now, we use this keyword with the repeat function.

0:15 Remember, of course, we can use repeat to say, I don't know, we want four columns. In each column, let's use minmax here, is between 250 pixels and a fraction. Minimum of 250 pixels and then take up as much space as possible for each one of our four columns.

0:36 I have 10 boxes in here right now. That's what we see. This is recap at this point in. This looks fun until we hit our 250-pixel minimum for each one of our columns. Somewhere right around here.

0:51 Now, we get this scrolling going horizontally. They're overflowing the container. One option, as we've already seen, would be to write a media query to find this breakpoint, whatever this is, 1000 pixels or something like that. Then change it to a three-column layout and then keep going, change it to a two-column layout.

1:10 Instead of that, the more magical option is to use this auto-fit or auto-fill keyword with repeat. Instead of specifying an exact number like repeat three or two or four columns, if I write auto-fit, this magical keyword will take whatever this value is. In this case, it's a range. A minimum of 250 pixels up to one fraction.

1:34 It will try and automatically fit as many elements as it can according to this specification. I'll show it to you here. It begins with seven boxes going across and then it changes to six and then it's going to change to five.

1:51 If you watched right here...Let me go to a different range. Right there. What happens is we cross the threshold. If I open up my DevTools, I'll pop them out into their separate window.

2:05 If we look at the computer tab for any one of these boxes, like this one right here, it's 250.398 pixels wide right now. They're each 250.398, but as soon as I shrink this a tad more, we drop below that 250-pixel mark. That's the minimum. Then we end up with a four-column layout right there. I shrunk it a tiny bit.

2:31 Same thing. Once we hit 250, which is our minimum it changes to a three-column layout. Once we hit 250, again, we go to a two-column layout. Finally, we go to a single-column layout when two no longer fit side-by-side.

2:47 I didn't have to write any media queries to make this work. All that I did was define a minimum size. Then my maximum size, usually, if you're using auto-fit, the max size will be 1fr.

2:59 It doesn't have to be, but this is essentially a way of saying, "Fit as many columns as we can that are at least 250 pixels wide. Make them bigger, if you can, but don't go below 250." This is what we end up with.

3:13 Now, if I change this number to be 400 pixels, it will fit as many minimum of 400 pixel wide columns as it can, but they're not 400 pixels exactly. At least most of the time, they're not.

3:27 This one, if we inspect is 401, right there. When I grow the screen, it's 435. It fits as many as it can. As soon as they cross that 400-pixel threshold, it goes to three and then down to two and down to one.

3:45 This is really nice when you have certain types of content. I wouldn't use this for a full-page layout necessarily, but if I had a bunch of cards or little articles or previews of some content that I wanted to display in a grid and I want this to be a responsive grid, this could be a very easy option, where I don't have to write media queries.

4:04 It's not the only option. There are still many times, you'll want to write media queries and rearrange your grid, especially with more complex layouts. This is an easy way to accomplish a commonly desired output, a number of columns that varies depending on the size of the screen, or the size of the window that it's in.