My 3-column grid turned into a 1-column mess at 9pm last night

I was building a dashboard for a client in Tulsa and had everything set up with named grid areas, then I decided to add a gap utility class at the last minute and forgot it would override my column template. The whole layout snapped into a single vertical stack, which actually looked kind of artistic but completely useless for their data tables. Has anyone else had a specific CSS property sneak in and wreck their grid in a way that took way too long to notice?

1 comments

1 Comment

emmar754d ago

Did you catch that CSS-Tricks article about how `column-gap` can mess with `grid-template-columns` when you mix utility classes? I read that a few weeks ago and it saved my butt. The thing is, everyone thinks grid gaps are totally safe to toss in, but they interract with the template in ways you just don't expect until the layout snaps. I had a similar thing happen with `grid-auto-flow` sneaking in from a reset stylesheet, and it took me two hours to realize it was overriding my explicit placements. The worst part is when the broken layout still looks "fine" on one screen size, so you don't even catch it until you resize or the client sends you a screenshot. Sounds like you got the artistic version of the bug, but yeah, those sneaky property overrides are the real monster of modern CSS.