I recently purchased Grid Critters by Dave Geddes. It's fantastic, but I found myself revisiting the difference between auto-fill and auto-fit. They're keywords you can pass into the repeat() function.
Thankfully, I found a really helpful video from the brilliant Rachel Andrew! She's part of the CSS Working Group, so she knows her shit. She also put together the excellent and free resource, Grid by Example.
auto-fill
The auto-fill keyword tells the browser to fill the grid with as many tracks of the given size as possible. It will still create the tracks even if there are no grid items to put inside them.
auto-fit
The auto-fit keyword does the same thing, except that any empty tracks will simply collapse down to 0, making them invisible.
Wrapping up
Many thanks to Rachel Andrew. Check out her video for a more detailed—and much better—explanation! 👇