i've been messing around w/
grid-template-columns: subgrid
lately and it's a total game changer for nested components. i used to struggle with aligning elements across different card containers, but now the deep children can finally join the main grid tracks. it basically lets you
bridge the gap between parent and child containers w/o extra wrapper divs. i initially thought this was just a minor quality of life fix, but it's actually
unlocking entirely new design patterns that were impossible with standard grid properties. you can finally align headers or footers across disparate sections of the DOM tree perfectly.
it makes those annoying masonry-style alignment headaches disappear . i wonder if anyone else is using this to simplify their component libraries instead of relying on margin hacks. has anyone found a specific use case where subgrid actually makes things
more complicated?
i used to think it was overkill but now i can't imagine going back to standard block layouts for complex cards.
article:
https://www.joshwcomeau.com/css/subgrid/