0:00 Next, we get to cover what is probably the most confusing part of this course, which is the distinction between auto-fit and auto-fill. Two different keywords that we can use with repeat that might seem like they do the exact same thing.

0:15 To illustrate this, what I'm actually going to do is duplicate my container and just have a second container below it called container2 with the same number of boxes and everything. I'll give it almost identical grid styles, so container2.

0:32 The only difference is that it will have auto-fill for its repeat. Repeat auto-fill, as many columns as you can with a size range of a minimum of 400 pixels up to one fraction. Otherwise, they're identical. Auto-fit, auto-fill.

0:50 This is what we see. They look identical. If I scale it down, grab the window here, it also still looks identical. They're doing the same exact thing. A lot of the time, they will have the exact same behavior, but not always. They do behave differently.

1:07 I'll show you here, still looks the same. We can't detect a difference at all. Where we will see a difference is if I shrink down the number of boxes. Let's just work with three boxes in each of them. I'll comment out my other boxes and I'll keep three in both containers.

1:27 Now, we see a difference. I'll shrink it down and even, eventually, that difference is going to disappear and they're going to behave the same way. On this larger size, we see a difference where what's happening is with auto-fit, which is our top container. This is auto-fit.

1:45 It's going to fit any of the currently available columns into this space by expanding them or growing them to fill that available space. As you can see here, there's no extra space in my container.

1:57 If we look at our auto-fill example, it's going to fill the row with as many columns as it can. Remember, the columns are created first. If we open up the grid tools and I go to my grid overlay. I turn it on. Of course, we can't see it at the same time.

2:17 There's lines here to show that there are two other columns that it's fit in. There's no content in those columns, but it has filled this container with as many columns as it can as soon as a new column can fit.

2:29 I keep expanding it more, you'll see there's a third column here now. It doesn't have content, but the goal of auto-fill is to fill as many columns into the space as it can, according to the rules that we laid out.

2:41 Instead of growing our first, second, and third boxes to fill or stretch out this area, it instead fills it with as many columns as it possibly can and then leaves those columns there. Even if they're empty, it doesn't collapse them.

2:57 With auto-fit, up top, it will collapse empty columns and will allow the other columns that are filled to stretch out and grow. I know it's confusing, but hopefully this illustrates the distinction.

3:11 Remember, the columns are always created first, before any content is ever added in. If I get rid of all of my boxes here and we just look at the columns...

3:24 I have to turn on the dev tools. Turn on my two grid overlays. It's very faint and hard to see, but there are five columns created here. One, two, three, four, five. There's four dividing lines in both of our containers.

3:38 Those columns are there before content is ever inserted. Then, once our boxes are added in, the behavior changes, depending on whether we use auto-fit or auto-fill. With auto-fill, our bottom example here, it fills in the existing columns and it doesn't collapse any of the other columns that it made.

3:58 With auto-fit, it fills in the existing columns. It collapses any unused columns. Then, the content that's there will grow to fill the container. A lot of the time, they'll look the same. It will behave the same. Like here, we can't tell the difference. Here, there's no difference. Here, there is a distinction when there's extra space to fill.

4:20 It doesn't help that auto-fit and auto-fill are also not the most intuitive names, in my opinion, but either way they're powerful. They're very useful to define these responsive, self-wrapping reorganizing grids.