Just realized grid-template-columns with auto-fill is way better than hardcoding breakpoints

I got tired of writing 4 different media queries for every dang project just to handle card layouts that collapse on mobile. You know how it is, you set up a 3 column grid at 1200px, then 2 at 768px, then 1 at 480px and it still looks janky on some random tablet size. So last week I tried using auto-fill with minmax(250px, 1fr) on a client's product page and it just worked perfectly across every screen I tested. No more guessing where the breakpoints should be, the grid just wraps the cards when there's not enough room. My only regret is not trying this sooner, honestly. Has anyone else had a moment where a built-in CSS Grid feature saved you from writing a ton of extra code?

2 comments

2 Comments

cole_mitchell574d agoRising Star

My buddy Mike had the exact same revelation last month while rebuilding his band's tour schedule page. He was complaining about how their lineup kept breaking on his girlfriend's iPad Mini until he swapped out his fixed grid for auto-fit with minmax. Sent me a screenshot later that night showing it scaling perfectly from his phone all the way up to his 32 inch monitor. Said he deleted over 70 lines of CSS and felt like a wizard doing it. I still haven't tried it myself but he won't shut up about it.

tessawebb4d ago

I still break mine with just one wrong typo, so I'm clearly not wizard material.