Problem description

A parent .parent-grid defines two columns and multiple rows of equal height. Each cell contains a .child-grid that should align its own rows to the parent’s row heights. The task is to use display: subgrid so that child grids inherit row track sizes, producing a perfectly aligned multi-level grid.

Goal

Implement a nested grid layout where child grids use subgrid to match parent row track sizes, achieving equal heights without duplicate definitions.

Constraints

Only CSS may be modified; assume subgrid support. No JavaScript or extra wrappers are allowed.

Sample visual output

Here’s what the output would look like:

Child rows align exactly with parent rows.

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