My grid layout for a client's product page broke on mobile for 3 days straight

I built a clean 4-column grid for a furniture site using named grid areas. It looked perfect on desktop. Then I tested on my phone and everything stacked in one weird column, pushing the 'buy now' button way down. I spent hours checking media queries and minmax values. The fix was stupid simple: I had set grid-template-columns to repeat(auto-fit, 250px) without a minmax clamp. On narrow screens, it just made one giant 250px column. Changed it to repeat(auto-fit, minmax(200px, 1fr)) and it snapped into place. Has anyone else had a grid look great then completely fall apart on a different screen size? What was your 'aha' fix?

2 comments

2 Comments

jackson.wesley14d ago

My buddy had a similar thing happen... his flexbox items kept shrinking because he forgot to set a flex-basis.

nathanking14d ago

Wait, your buddy just forgot flex-basis entirely? @jackson.wesley that's like trying to drive with no gas. No wonder everything collapsed. I've seen items shrink to nothing without it. That default behavior will wreck your layout every single time.