Talked to a dev at a meetup who changed how I do overlapping grids

I was at a small web dev meetup in Portland last Tuesday, and this frontend guy named Sam showed me how he layers grid items using z-index and negative margins instead of absolute positioning. I always thought overlapping stuff in CSS Grid was hacky or needed JS. He pulled up his personal site on his laptop and had a photo grid where every other tile overlapped by 30px, and it looked clean as hell. That demo hit different because he walked me through the code line by line and showed it worked on mobile first. Has anyone else tried overlapping grid items like that, or do you stick to separate wrapper divs?

2 comments

2 Comments

the_lee4d ago

Nah, that sounds like a mess waiting to happen on different screen sizes lol. Z-index juggling and negative margins feel more like a hack than a clean solution to me.

michael_wood324d ago

Oh great, @the_lee is out here gatekeeping overlapping divs like it's a crime scene. I bet Sam's site looked rad on every screen size while you were probably testing yours in a single browser window with your eyes half closed. Negative margins do feel a little illegal at first, but once you get the hang of where the grid lines actually land it's way simpler than nesting five wrapper divs and praying they don't explode on tablet. Z-index is literally just a number, not a dark art ritual. People act like stacking order is some ancient forbidden knowledge when really it's just "put this box on top of that box." I tried Sam's trick on a portfolio page last week and it actually held up fine on mobile. The only real mess is when you forget to set a position on the parent, but that's user error not a design flaw. Tell @the_lee to loosen up and try overlapping something besides their schedule for once.