My grid layout broke on mobile after I used fixed pixel gaps

Set up a nice 3 column product grid with 20px gaps looked perfect on desktop but turned into a mess on my phone items overlapping and shifting weird. Realized I should've used min() or clamp() for the gaps instead of hard pixels. Anyone else had responsive gap issues with CSS Grid?

2 comments

2 Comments

danieljenkins3d agoTop Commenter

Fixed a similar thing last week with my shop grid. Switched to `gap: min(20px, 4vw)` and it fixed all the mobile overlap instantly.

felix4883d ago

Wait, you're telling me a single CSS line actually fixed mobile overlap without breaking anything else? @danieljenkins, why do I always find out about these tricks a week late?