Just realized my CSS Grid nesting was the reason my site felt like a maze at the hackathon in Seattle

So last month I'm at this 48 hour hackathon in Seattle, and I'm building this dashboard for a fake grocery app. Everything looked fine in my browser, but when a buddy of mine tried to grab a product card with his keyboard, he goes 'dude, why does tabbing feel like falling down a well?' Turned out I had 6 levels of nested grids inside a single section, each with their own gaps and minmax values. Redoing it as a flat grid with named template areas cut the code from 220 lines to about 80, and navigation made way more sense. Has anyone else hit a wall with over-nesting, or do you guys stick to max 2 or 3 grid layers?

0 comments

0 Comments

No comments yet

Be the first to share your thoughts on this discussion.