Problem description

A .container holds multiple .item elements of varying content size. The task is to employ CSS Grid with repeat(auto-fit, minmax()) so that:

1. Each .item becomes at least 200px wide and at most share the remaining space equally.

2. The layout automatically adjusts the number of columns as the container width changes.

3. All grid cells maintain equal height in each row.

Goal

Implement a dynamic grid that adapts column count based on container width, ensuring equal height columns without media queries.

Constraints

Only CSS modifications are allowed. Do not alter HTML structure or use JavaScript.

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.