A Dev in Portland told me my grid was backwards, took me 2 hours to see it

Was at a CSS meetup last Tuesday and this guy walks up after my talk on nested grid layouts. He points at my animated card stack and says 'your grid is backwards'. I laughed it off, but he grabbed my laptop and flipped two line values. The motion broke instantly, but then he showed me how the tracks were actually aligning to the content edge instead of the container padding. I had been fighting that shimmer effect for a week. He called it a 'track direction gotcha' with the row and column gap shorthand. Has anyone else hit this where the gap placement totally changes the overlap behavior? I rebuilt it his way and the animation got 30% smoother.

2 comments

2 Comments

iris_park22d ago

Honestly, that sounds like one of those tricks that look clever in a demo but fall apart on real projects. Flipping those values probably just moved the visual glitch somewhere else, and the smoother animation is likely from his browser's cache, not his fix. The whole "content edge vs padding" thing gets thrown around to sound smart, but most of the time the default behavior is fine if you set your gaps once and stop touching them. Bet if you tested that rebuild in Firefox or Safari, the overlap would fight you in a whole new way.

val_taylor21d agoTop Commenter

Used to think the cross-browser stuff was overblown too, but after fighting a similar gap issue in Firefox last month, I get where you're coming from. That rebuild trick buys you time, not a real fix.