https://nalar.dev/tags/css-grid/ Recent content in CSS Grid on Nalar Hugo en-us Tue, 01 Sep 2026 00:00:00 +0700 https://nalar.dev/css-subgrid-align-nested-components/ Tue, 01 Sep 2026 00:00:00 +0700 https://nalar.dev/css-subgrid-align-nested-components/ <p>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. <code>subgrid</code> lets a nested grid reuse those tracks instead of guessing their sizes.</p> <p>Modern evergreen browsers support subgrid, making it practical for production layouts where cross-component alignment matters.</p> <h2 id="the-problem-with-independent-nested-grids">The problem with independent nested grids</h2> <p>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.</p>