Subgrid broke my whole layout when I tried to nest it 3 levels deep

I was building this product grid for a client in Chicago last Tuesday and thought subgrid would be clever. Three levels deep, the rows just ignored my heights completely and the whole thing collapsed into a mess. Had to rip it all out and use plain old grid with explicit row definitions instead. Has anyone else had subgrid fail on them like this?

2 comments

2 Comments

wendy_clark9d ago

Got subgrid working fine on two levels but as soon as I tried a third it just like gave up on life. I mean maybe it's just me but this reminds me of how my kitchen cabinets work you know. Two levels of stacking plates is fine but add a third and suddenly everything wobbles and feels unstable. Same thing with those stacking storage bins at Target - works great with two but three starts to feel like a Jenga game waiting to happen. Kinda feels like CSS is telling us that some things just aren't meant to go that deep.

rayc839d ago

Hey @wendy_clark, I gotta push back on this one a little. Actually I think three levels of subgrid might be more like stacking those plastic drawers you see in garages. The first two lock together fine but the third one actually needs to be anchored to the wall or the whole thing tips over. I had a similar issue until I realized my third level grid container was missing a grid-template-rows definition on the parent. Once I added that it clicked into place. Maybe it's not that CSS can't handle the depth but that we're accidentally skipping a step somewhere in the nesting.

-1