auto-fill vs auto-fit?
Title ^
I checked other articles and StackOverflow like this one here: https://stackoverflow.com/questions/46226539/what-is-the-difference-between-auto-fill-and-auto-fit
,but I'm still confused
Stack Overflow
What is the difference between auto-fill and auto-fit?
I'm working with CSS grids to achieve a card grid layout.
But I don't quite know how to tweak the minmax() statement to handle use cases where there aren't enough items to fill a row but still nee...
3 Replies
auto-fill fills the row with as many columns as it can contain, within the confines of the repeat() function.
auto-fit does the same, but then collapses any empty columns (so it fits the content instead of filling the column with rows.
Here's a good article that has a visual:
https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/For a long time, I treated them a little bit like I often tell people early in their CSS journey who don't know when to use margin or padding... try one, and if it doesn't do what you want, try the other one 😅
I think that article is great, so read that to understand what's going on, but my general rule of thumb for them is to just use auto-fit. It's the one you want 95% of the time anyway. If you run into one of the cases where auto-fill is what you wanted, it's pretty easy to switch, but it really won't be often at all. I can't even remember the last time I used it.
Thanks a lot guys! 🙂