Problem description

Given a collection of thumbnail images inside a container, implement a responsive grid that:

1. Displays as many columns as possible with each thumbnail at least 150px wide.

2. Automatically wraps thumbnails to new rows when they overflow.

3. Maintains a 10px gap between images.

Goal

Write CSS in styles.css to configure a gallery container that adapts fluidly to the viewport width, resizing and wrapping thumbnails without any media queries.

Constraints

• Use CSS Grid only.

• Do not use media queries.

• Set thumbnail width with a minimum of 150px and a maximum of 1fr.

• Keep a 10px gap between items.

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.