My first real CSS grid layout fell apart at the Orlando code camp demo, and one line of fiddle fixed it | CSS Battle Tactics - The Design Community Hub
My first real CSS grid layout fell apart at the Orlando code camp demo, and one line of fiddle fixed it
I was up in front of maybe 40 people at a small code camp in Orlando showing off a dashboard I built with grid, and the moment I resized the browser to phone width, three cards stacked on top of each other and swallowed the footer. I had spent two weeks on that layout and felt pretty good about it right up until that. Turns out I had hardcoded column widths that only worked on my laptop screen. Somebody in the back row said try minmax and auto-fit, and we threw it on the projector and it just worked on every size we dragged to, phone, tablet, wide monitor. I have been using that combo ever since, and my grid lines stay clean without a single media query. But I know I am probably missing other tricks that solve this same problem better. What do you all reach for when a layout has to survive every screen width with as little code as possible?