Just realized CSS Grid can handle subgrid for nested layouts way better than I thought

I was working on a dashboard layout for my portfolio site and kept fighting with nested flexboxes getting misaligned. Then I read about the 'subgrid' value on the MDN docs page last night. I mean, I knew subgrid existed but I didn't realize you could apply it to row tracks and column tracks separately. It fixed this annoying alignment issue I've had for three months across two different projects. Has anyone else found a weird use case where subgrid saved you from a messy workaround?

2 comments

2 Comments

finleybutler9d ago

Oh man, have you been fighting with that too? I spent like two whole weekends trying to get a pricing table to line up properly with nested flexboxes and it was driving me crazy. Subgrid fixed it in like ten minutes after I finally understood how to use it on columns... such a relief. I love how it just passes the track sizes down without all that extra wrapper div nonsense. It's one of those features that feels like magic when it finally clicks.

wendysmith9d ago

Ugh @finleybutler yes! I had this exact nightmare with a dashboard layout where the card heights just would NOT match up across rows. Tried all the usual hacks and then subgrid just... made them click into place like it was nothing. I still don't fully get how it works under the hood but I don't care honestly, it just saves me so much time. That moment when you delete all those extra divs and the layout holds together is so satisfying it's almost embarrassing.