That feedback about overlapping grid items totally changed my layout game

I had this layout where I was using absolute positioning for a hero section with text over an image, and a guy on the CSS Grid Discord told me to just use grid with overlapping items instead. He said, 'you're missing out on the flow and responsiveness by not keeping everything in the grid.' So I spent last Tuesday refactoring the whole thing using grid-template-areas and negative margins on a single cell. It actually made the responsive breakpoints way cleaner, no more fiddling with z-index weirdness on smaller screens. The text stays properly aligned to the image edges now without breaking. Has anyone else found a good pattern for overlapping elements that doesn't fall apart when the content length changes?

2 comments

2 Comments

grant_torres2d ago

yeah my buddy was fighting with overlapping text over a gradient background for weeks, kept messing with absolute positioning and losing his mind on mobile. he finally tried the single grid cell trick with justify-self on the text and said it was like a weight lifted off his shoulders lol.

tara3452d ago

The z-index stuff on mobile was exactly what made me switch too lol. Have you tried the approach where you define the overlapping area as one grid cell and then use justify-self and align-self on the child elements? I found that if you set the image to stretch full cell and the text to start with some padding, it handles content length changes way better than negative margins ever did.