I recently purchased Grid Critters by Dave Geddes. It’s fantastic, but I found myself revisiting the difference between
auto-fit. They’re keywords you can pass into the
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 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 keyword does the same thing, except that any empty tracks will simply collapse down to
0, making them invisible.
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!