Problem description

You have a container <div class="gallery"> with multiple .item child elements. Write CSS rules so the gallery is displayed as a grid, automatically fitting as many columns of a minimum width of 200px as the container allows, and expanding items to fill available space.

Goal

Implement CSS in styles.css to create a grid layout where items maintain a minimum width of 200px, automatically wrap based on container size, and fill the row using fractional units for remaining space.

Constraints

• Do not modify the HTML structure.

• Use only CSS (no JavaScript is allowed).

• Minimum item width must be 200px.

• Items should expand to fill leftover space evenly.

• The grid should reflow on container resize.

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.