Problem description

Create a grid container that:

1. Shows a single column for viewports less than 400px.

2. Shows two columns for viewports between 400px and 800px.

3. Shows three columns for viewports 800px and above.

Goal

Write CSS in styles.css with a mobile-first approach: start with one column by default, then add media queries at min-width: 400px and min-width: 800px to increase the number of columns.

Constraints

• Use CSS Grid and JavaScript is not allowed.

• Use exactly two media queries.

• Columns must equally divide the available width.

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