21
Just realized I was doing my gap trick totally backwards
I've been using CSS Grid for maybe 2 years now, and I always placed my gap values inside the grid container as a shorthand. Like grid-gap: 20px. It worked fine so I never questioned it. Then last week I was watching a tutorial on grid patterns and the guy put gap: 20px on a child element instead of the parent. I literally paused the video and stared at my screen for a minute. Turns out you can set gaps on individual grid items using grid-column-gap and grid-row-gap separately. I had been fighting with nested containers to make different spacing between rows and columns. Now I can just set a 10px row gap on some items and a 30px column gap on others. Has anyone else found a basic grid property they ignored forever only to discover it later?
2 comments
Log in to join the discussion
Log In2 Comments
oscarm249d ago
Wait, hold up - you can set gap on individual items?? I've been doing CSS Grid since it came out and I had no idea that was even a thing. So instead of having to write separate classes for different grid areas I could just toss a column-gap on the specific elements that need it? Man, I feel like an idiot for all those times I made a whole separate grid container just to get tighter spacing on one section. I literally rebuilt a card layout last month with nested grids because I wanted the images closer together than the text below them. Could have just put a smaller gap on the image items. This is one of those things that makes me wonder what else I've been missing all this time.
7
riley589d ago
Sat through a whole workshop once where the instructor was showing us how to layer z-indexes and I just nodded along. Then like six months later my buddy looks over my shoulder and goes "why are you using z-index: 99 on everything?" I didn't even know you could use negative numbers. Turns out you can just set z-index: -1 and it slides behind everything without fighting with stacks. Felt like such a goof for all those times I was nesting divs just to get something to sit behind another thing. Grid spacing is probably the same kind of blind spot. We get so used to doing it one way we don't even look around for a better way.
6