Lost a whole afternoon to a grid gap I could have spotted in 10 minutes

Spent last Saturday rebuilding a product card layout because I trusted a 12-column grid from a YouTube tutorial without checking the math. The gutters were set to 1.25rem but the container padding was 1.5rem, so every card ended up misaligned by 4px. By the time I caught it, I'd already rewritten the media queries for tablet and mobile. Has anyone else had a similar headache from copying a grid setup and skipping the verification step?

1 comments

1 Comment

the_terry3d ago

Reach for the browser dev tools next time before you touch a single line of CSS. This is one of those lessons that only stings once because after you spend hours fighting a phantom 4px offset, you never trust a tutorial again. The real trap is that gutter math looks so clean on paper, 12 columns times whatever, but it never survives contact with real padding and borders. I usually screenshot the finished grid from the tutorial and overlay it on my own container in the inspector just to eyeball where the breakage is going to happen. It also helps to set container padding to zero while you build the grid, then add it back once you know the columns are tight. Saves me from burning an afternoon on what should be a five minute setup.