Just realized why my CSS grid kept breaking on mobile

I was working on a little personal project over the weekend, a simple recipe page for my mom, and spent like 3 hours trying to figure out why my grid layout looked perfect on my laptop but totally fell apart on my phone. Turns out I was using fixed pixel widths instead of fr units or percentages. Found this really clear explanation on freeCodeCamp that finally made it click. Has anyone else had that moment where one tiny property change fixes everything?

2 comments

2 Comments

spencer_thomas41mo ago

The freeCodeCamp article on CSS Grid is honestly one of the best resources I've found too. Did you end up using grid-template-columns with fr units, or did you go with something like minmax() to handle the mobile breakpoints? I always find myself fighting with minmax when I have more than 2 columns, the sizing just gets weird on smaller screens.

barbarac671mo ago

Oh man, @spencer_thomas4 hit the nail on the head. I finally went with fr units for the main columns, but I had to add a minmax(250px, 1fr) on each one to stop them from getting too skinny on phones. That freeCodeCamp article saved my sanity too, I was using fixed pixel widths like a dummy.