Problem description

A .grid container holds multiple .card elements of varying heights. The task is to:

1. Display cards in equal-width columns (e.g., 3 columns) that fill the container width.

2. Pack grid items tightly (dense packing) so that variable-height cards create a masonry effect.

3. Avoid vertical gaps by calculating grid-row-end: span N based on each card’s content height and a row height unit.

Goal

Implement a CSS-only masonry layout using Grid auto-placement and row-span calculations without JavaScript.

Constraints

Only CSS on the existing HTML may be used; no JavaScript or additional wrappers are allowed.

Sample visual output

Here’s what the output would look like:

Here, card heights differ, but columns remain aligned.

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