Grid gap values tripped me up for a whole afternoon last week

I was building a simple photo gallery layout with CSS Grid, three columns, nice and clean. Set my gap to 2rem and thought I was done... then I added a border around each image and the spacing looked all wrong. A buddy of mine who does frontend work told me to just use margin instead of gap on the grid items themselves. Said gap would never behave right with borders. I figured he was the expert so I swapped everything over to margins and spent an hour fighting with overflow and last-row alignment. Turns out he was dead wrong. Grid gap works perfectly fine with borders if you use box-sizing border-box and account for the gap in your column widths. Has anyone else gotten bad grid advice from someone who seemed confident but was way off base?

2 comments

2 Comments

the_shane10d ago

Right, is your buddy one of those guys who learned everything from YouTube tutorials from like 2017? I had a similar thing happen with CSS columns, not grid though. I was trying to make text flow into two columns for a newsletter thing and this guy kept insisting I had to use float styles from like 2005. He was so sure that columns were buggy and would break on mobile. I spent three hours recreating the whole layout with floats and clearfix hacks and it looked awful. Finally just tried the columns property and it worked perfect on desktop and phone with like four lines of code. The funniest part was he saw my finished thing and was like "oh wow, I guess they fixed columns then." No dude, they worked fine the whole time, you just didn't know what you were talking about.

joel28010d ago

Wait, did he actually say "they fixed columns" like it was some ancient bug that finally got patched?