Appreciation post: Grid auto-fill vs auto-fit saved my layout from total collapse

I spent probably 4 hours last week fighting with a card grid that kept breaking on smaller screens. Every time I resized the browser, the last card would either hang off the edge or leave this weird gap on the right side. I was about to just give up and use flexbox with some ugly breakpoints. Then a buddy from a dev group told me about the difference between auto-fill and auto-fit. I had always just copied whichever one I saw in a tutorial without thinking. Turns out auto-fill keeps those empty column tracks even when there's no content, while auto-fit collapses them. Once I switched to auto-fit, my grid snapped into place like a dream. No more gaps, no more overflow, just clean rows of cards from 1200px down to 320px. Has anyone else had a similar headache with these two properties? I still dont fully get when to use one over the other in more complex layouts.

2 comments

2 Comments

river_wright11d ago

Had the exact opposite experience honestly. I was so pro auto-fill because collapse sounded weird. Then a project with variable card counts made me finally try auto-fit. Never looked back.

simon_black10d ago

Yeah, "variable card counts" got me too. Changed my whole view on it.