Found a smarter way to position my hero images with CSS Grid

I used to stack background images and position them with margin tweaks on my portfolio site, which always broke at different screen sizes. Last week I swapped to using CSS Grid with named grid areas and object-fit to lock my hero images in place. Has anyone found a clean trick for overlapping text on top of grid-placed images without using absolute positioning?

2 comments

2 Comments

the_piper2d ago

Was totally against grid for hero images before, but this actually makes a ton of sense.

the_leo1d ago

Honestly I'm still not sold on it. Grid systems feel super overengineered for a hero image that's gonna get swapped out every two weeks anyway. Like, are people really stressing about pixel precision on something that's mostly just a background? Ngl it feels like a solution looking for a problem most of the time. I get that it helps with alignment and responsive stuff but for a hero block that's usually one big photo? Seems like overkill. Tbh if the layout works it works, don't overthink it.