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 .module grids inherit the parent’s row tracks, ensuring that all headings and paragraphs align perfectly with the same baseline grid without using explicit margins.

Goal

Use only HTML and CSS to:

1. Define --rhythm (e.g., 1rem) in :root.

2. On .layout, apply display: grid, grid-template-columns: repeat(2, 1fr), and grid-auto-rows: var(--rhythm).

3. On .module, enable a grid and inherit row tracks with grid-template-rows: subgrid and define a single column.

4. Ensure .module h3 and .module p fill their respective subgrid rows, aligning with the parent rhythm without using margins or padding.

Constraints

• Only CSS is allowed.

• Use rem units and CSS variables.

• CSS file must be named styles.css.

• Do not modify the HTML beyond the provided skeleton or use JavaScript.

• Assume the browser supports CSS Subgrid.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.