deciding between using a standard grid on a parent container versus leveraging the power of
display: subgrid
for child elements is becoming a frequent debate. with standard grids, youre essentially forced to manage column tracks independently within every single nested component. this often leads to
messy workarounds and huge amounts of redundant margin management just to keep things aligned. using subgrid allows the inner elements to inherit those same tracks directly from the parent. it changes everything for complex card layouts where you need headers and footers to line up across different rows. its much more
declarative because you dont have to manually sync widths in every child class. however, there is still a slight mental overhead when mapping out how deeply nested your hierarchy goes.
>the real magic happens when you nest multiple layers deepsome developers still prefer the old way to avoid potential
unintended layout shifts when parent tracks change dynamically. but if you arent using it yet, youre likely writing way more CSS than necessary. ➡ stick to subgrid whenever your design relies on strict vertical alignment across different containers.