Finally realized I was nesting grid containers way too deep after a coworker showed me subgrid

Saw him build a complex layout in like 30 lines of CSS while I was sitting there with 4 levels of nested grids and it finally clicked that I was overcomplicating everything, has anyone else had that forehead slap moment with subgrid?

2 comments

2 Comments

the_patricia1d ago

Wait, didn't you say subgrid cut it down to one grid on the parent? That's not quite how it works. You still need the parent grid to define the rows and columns, then the children use subgrid to inherit those tracks. So you've still got two grids going, just not five nested ones. The real win is that subgrid lets the child elements line up with the parent's grid lines instead of creating their own fresh ones. That's what saves you from the nesting nightmare, but you're not down to a single grid. Still a huge improvement though, just wanted to clarify the mechanics.

margaret_lane1d ago

Jumped into subgrid a few months ago and it felt like cheating. I had a dashboard that needed a bunch of cards all lined up with different content lengths, headers, and footers. Used to be four or five nested grids per card just to keep everything straight. Subgrid cut that down to one grid on the parent and subgrid calls on the children. Layouts that took me an hour now take maybe ten minutes. Still can't believe I went years without knowing about it.