Loading…
0
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
Log in to join the discussion
Log In2 Comments
danieljenkins3mo ago
Fixed a similar thing last week with my shop grid. Switched to `gap: min(20px, 4vw)` and it fixed all the mobile overlap instantly.
1
felix4883mo 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?
1