Realized I was nesting CSS Grids inside CSS Grids for no reason

I was building a three-column dashboard layout last week and had six levels of grid nesting before my coworker pointed out I could just use subgrid on the child elements. Has anyone else gone deep on grid nesting before catching yourself?

2 comments

2 Comments

wyatt_fox685d ago

Man that reminds me of the time I was laying out a simple blog archive page and somehow ended up with grids inside flexboxes inside grids. It was an absolute mess. My whole screen turned into a giant spreadsheet of divs. My coworker walked over, took one look, and just said "you know you can set display: contents on that wrapper, right?" Felt like a total fool. Have you ever had one of those moments where you realize youve been doing something the hard way for hours?

taylor_barnes594d ago

And honestly, the real kicker is that display: contents has its own weird bugs to watch out for. I've had it break keyboard navigation on some sites because it basically removes the wrapper from the accessibility tree. So now I always double check that the parent element isn't doing anything important for screen readers before I use it.