TIL that nesting grids can actually break your layout in weird ways

I was talking to a junior dev last week, and she asked why her three-column grid inside a grid item wasn't lining up right. I told her to check the parent grid's column widths, turns out I had a fixed gap on the outer grid that was messing with the inner one's fractions. It hit different because I've been doing this for 5 years and never noticed that issue before (maybe I just got lucky?). Has anyone else run into a nested grid failing because of something dumb like that?

2 comments

2 Comments

amy_reed7912h ago

Read a blog post last week that said nested grids break because of something called "gap inheritance." Basically the inner grid inherits the outer grid's gap and then adds its own on top. So your junior dev's fractions were getting crushed by double spacing. Makes sense once you see it but damn it's easy to miss.

felix4886h ago

Yeah my buddy Sam spent like three hours debugging a layout issue last month and it turned out to be exactly this. He was so mad when he figured it out, lol.