Problem description

Given several content blocks inside a container, implement a grid that:

1. Shows three columns when the viewport width is at least 800px.

2. Collapses to two or one column automatically as the viewport shrinks, ensuring each column has a minimum width of 200px.

Goal

Write CSS in styles.css to configure the grid container so that it displays exactly three columns on large screens and responsively adjusts to smaller viewports without explicit media queries.

Constraints

• Use CSS Grid only.

• Media queries are not allowed.

• Set column width with a minimum of 200px and a maximum of 1fr.

• The grid should always attempt to display up to three columns.

• Keep a 16px 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.