The week my grid layouts broke on 3 different screen sizes

Last Tuesday I thought I had a perfect CSS Grid layout for a client dashboard. It looked great on my 27 inch monitor but when I checked it on a 13 inch laptop everything overlapped. Then I tried it on a tablet and the sidebar just vanished. Three different breakpoints each with their own glitch. I spent Thursday and Friday rewriting the whole thing using auto-fit and minmax instead of fixed columns. Some people say fixed grids are more predictable while others swear by flexible ones. Which approach do you usually go with for complex layouts and have you ever had a similar failure cascade?

2 comments

2 Comments

barnes.kai13d ago

Nah, fixed grids are fine if you actually test on real devices from the start though.

the_richard12d ago

Yeah "testing on real devices from the start" is exactly what saved me. I got burned once building a whole layout on my laptop only to find it looked terrible on actual phones and tablets. Now I keep a few older devices around and check stuff on them before I get too deep into the design.