Warning: That one Tuesday with the nested grid killed my whole afternoon

Last month I had this brilliant idea to build a calendar layout with 6 levels of nesting inside CSS Grid. By hour 4 I had Firefox crashing every 15 minutes and Chrome straight up refusing to render the third subgrid. I finally gave up at 5pm and rebuilt it with just 3 levels plus flexbox for the inner sections. Has anyone else hit a hard limit on nested grids crashing the browser?

2 comments

2 Comments

emmar755d ago

Oh come on, 6 levels of nesting sounds like you were just asking for trouble. I've done 4 levels before and it was basically a nightmare of inspect element tooltips that wouldn't even load. But crashing the browser completely? That feels like maybe you had some other issue going on, like a heavy image in one of those cells or a weird calc() statement that was recomputing every frame. Did you try just setting explicit heights and widths on your grid tracks instead of letting everything auto-fill?

theabennett5d ago

Oh man, I gotta push back on that a little. I've had 5 levels of nesting work fine in production before, and it was literally just rows inside rows inside rows with no heavy images or fancy calc() at all. The browser crash wasn't about bad code on my end, it was about how Chrome handles certain grid children when you mix grid-template-areas with auto-fit columns inside nested grids. Setting explicit heights helped a bit, but the real fix was ditching grid for that inner layout and using flexbox instead. Sometimes you just hit a performance wall with CSS Grid that doesn't show up in smaller test cases, you know?