CSS Grid

Use CSS Subgrid to Align Nested Components

CSS Grid normally creates an independent track system for every grid container. That isolation is useful until nested components need to align with columns or rows defined by an ancestor. subgrid lets a nested grid reuse those tracks instead of guessing their sizes. Modern evergreen browsers support subgrid, making it practical for production layouts where cross-component alignment matters. The problem with independent nested grids Consider a product list where every card contains a title, description, price, and action. If each card uses its own rows, the buttons move vertically when descriptions have different lengths.