Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:41 minutes
Grid400 2
  • Overview
  • Transcript

2.6 Working With auto-fill and auto-fit

In this, our last lesson in this short course, you’re going to learn about the auto-fill and auto-fit keywords that go along with the repeat() notation. Let’s begin.

Related Links

2.6 Working With auto-fill and auto-fit

All right, let's talk about track repetition and the repeat notation. I have an example prepared here. So I'm defining the columns on this grid as 1fr 1fr 1fr. If you watched the basics video, or the basics course, I mentioned the repeat notation where you can basically do this, grid-template-columns: repeat(3, 1fr), okay? And this bit is exactly the same as this bit. I'm basically saying, repeat 1fr three times, and the result is exactly the same. Now, what's up with this auto-fill and auto-fit? Well, the auto-fill and auto-fit keywords work with the repeat notation. And they're very useful for when you don't exactly know how many tracks you want to display. Instead you're saying browser, grid, go ahead and figure that out for me, right? I don't want to give you a specific number on how many tracks I want, but I want you to figure out. I want you to figure out how many tracks can I fit in that particular space that have a specific set of properties? And here's how we can use those key words. First of all, let's cover auto-fill. So I'm simply gonna rewrite this, grid-template-columns. I'm gonna say, repeat(auto-fill, 100px), let's see what that does. The auto-fill keyword will basically create as many tracks as it can fit into the grid container without making the grid overflow. So in my case, I'm saying go ahead and fit as many 100 pixel tracks as you can in my grid. Of course if I resize, right, more grid tracks will be able to fit in there. That's pretty cool, isn't it? So I'm not specifying a repeat number, I'm just letting the browser figure out for itself how many I want. All I'm specifying is the size of the track. So it can be 50 pixels. It can be two rems. It can be, I don't know, 25%. The browser figures the stuff out for itself. Now, what about auto-fit? Let's set this back to 100 pixels. Auto-fit is basically the same as auto-fill, except that after all the grid item placement, it will only create as many tracks as needed and all of the other tracks will be collapsed. So to show you what I mean by that, let's create, This track, let's do an inspection here. And let me show you what's happening. So I have the Firefox layout inspector here, and as we can see, auto-fill created all of these empty tracks here at the end, because well, simply, I did not have enough grid items to fill the available space. So it created empty tracks. Auto-fill will do that, auto-fit will actually collapse these empty tracks, okay? So let's do this. I'm gonna do the same as before, repeat(auto-fit, 50px). So as you can see now, we have the exact same layout, but we do not have those extra tracks, because that's what auto-fit does. Cool, now, let's hide this for now. You can also use auto-fit or auto-fill in combination with min-max, and that's gonna truly create some responsive layouts. So you can say repeat (auto-fit), and instead of 50 pixels you can say minmax. Let's say we want a minimum of 50 pixels and a maximum of 1fr, and that will create a very nice layout like this. Which will adapt according to the width of the screen. Let's change this to 150 pixels. So right now the browser will basically fit as many 150 pixel minimum, 1fr maximum width items in the space as it can without overflowing it, okay? So on small screens we have one single column, medium screens, this goes to two columns. And then it goes to three, four, five, depending on how much available space we have. This is truly a super, super cool and effective way of creating essentially a responsive layout. And that's it for this short course on CSS grid layout, I hope it gave you a good insight into the more advanced aspects of working with grid. I truly believe this is where we're headed right now, it's the tool of the future, this one. So I really encourage you to spend a lot of time and learn the ins and outs of it, because we'll be using it a lot. With that said, thank you very much for watching this short course, I'm [INAUDIBLE], and until next time, take care.

Back to the top