CSS Grid: auto-fill and auto-fit

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! 👇

Grid by Example: auto fill auto fit


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!