33
My grid gallery broke on mobile because I forgot about minmax
I built a photo grid for a client's site last month using grid-template-columns: repeat(auto-fit, 200px). It looked perfect on my big monitor, but on my phone the columns just stacked into a single skinny line. I had to go back and add minmax(150px, 1fr) to get it to scale right. Has anyone else had a grid totally fall apart on small screens like that?
2 comments
Log in to join the discussion
Log In2 Comments
danieljenkins8d agoTop Commenter
Been there. Built a dashboard layout with fixed 300px columns. Looked solid on desktop. Checked it on a tablet and it was just one sad, overflowing column. The minmax fix felt so obvious after. It's like a right of passage for grid.
3
evand658d ago
A buddy of mine spent a whole weekend building a portfolio layout with fixed column widths. He showed it off on his laptop and it looked sharp. The moment he pulled it up on his phone, it was just a tragic line of tiny images. He had that exact same face-palm moment realizing he needed minmax to stop the grid from collapsing.
1