Problem description

Create a grid container that:

1. Displays items in a masonry-like layout.

2. Packs items densely to fill gaps (grid-auto-flow: dense).

3. Adjusts number of columns based on viewport: 2 columns on mobile (< 600px), 3 on tablet (600px–900px), and 5 on desktop (> 900px).

Each grid item has a custom grid-row: span N defined via inline style or class, determining its height.

Goal

Write CSS in styles.css to configure the grid container and items for a masonry-style layout using CSS Grid only.

Constraints

• Use CSS Grid with grid-auto-flow: dense.

• Three breakpoints: <600px, 600px–900px, >900px.

• Gap: 10px.

• Item heights vary via grid-row: span N.

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.