Nested Grid Subgrid Rhythm
Explore how to use CSS Subgrid within nested grid containers to achieve perfect vertical alignment of headings and paragraphs. Learn to define and inherit grid row tracks using CSS variables and rem units, ensuring consistent vertical rhythm in layouts without relying on margins or padding.
We'll cover the following...
We'll cover the following...
Problem description
You have a parent container with the class .layout that uses CSS Grid to create two columns and defines grid-auto-rows: var(--rhythm). Inside each grid cell is a .module element containing an <h3> and one or more <p> elements. Your task is to use CSS Subgrid so that the nested ...