I used to overlap grid items like a maniac and thought i was brilliant

For about 6 months i was building layouts where i would just throw items on top of each other using grid-row and grid-column overlaps. I thought i was being clever making all these layered designs. Then last Tuesday i tried to add a simple tooltip to a product card and everything broke because the overlapping was fighting z-index and absolute positioning. A coworker just looked at my code and said 'why dont you just use a subgrid for the card content instead'. That moment i realized i was making things way harder than they needed to be. Has anyone else gone down the over-overlap rabbit hole before figuring out subgrid?

2 comments

2 Comments

jade6183d ago

Three months. That's how long I spent stacking grid items on top of each other like some kind of layout genius. I had this whole product catalog where every single card had at least three overlapping layers for the image, price, and a badge. It looked great until I had to add a sticky header and suddenly nothing wanted to play nice. My coworker walked past my screen and just said "subgrid exists you know" and I felt like an absolute idiot. Now I only overlap when I absolutely have to and it saves me so much headache.

patricia_wright3d ago

Read a blog post last week that said most overlapping layouts just need subgrid.