CSS grid gap trick that saved me 3 hours

I was building a card layout with uneven spacing and kept adding margins everywhere. It took me 4 hours to realize I could just use gap property on the grid container. No more margin hacks, no more nth-child selectors. Has anyone else had a moment where a simple property saved them tons of time?

2 comments

2 Comments

blaker7514d ago

Gap really is one of those things you don't appreciate until you've been fighting with margins for hours. Were you using negative margins before or just piling on margin-right and margin-bottom? Because I've seen people do some wild stuff with calc() and negative values trying to fake grid behavior.

miles_jackson914d ago

Got a buddy who spent like 5 hours on a menu layout with flexbox trying to get spacing right. He had margins on every single li element, then media queries to remove them on different breakpoints, it was a mess. I showed him gap and he just stared at his screen for a solid minute before deleting like 80 lines of CSS. He texted me later that night saying he felt like he wasted his whole career not knowing about it. The funny thing is he still uses margins out of habit sometimes and has to remind himself gap exists.