Problem description

Given a series of content cards inside a container, implement a responsive grid that:

1. Displays one column on narrow viewports (< 500px).

2. Displays two columns on medium viewports (>= 500px and < 900px).

3. Displays as many columns as fit (min width 250px) on wide viewports (>= 900px).

Goal

Write CSS (in styles.css) to configure the grid container and items so that they adapt fluidly to different screen widths without using explicit media queries for each range.

Constraints

• Use CSS Grid only.

• Do not write manual media queries (except for linking the stylesheet).

• Minimum column width must be 250px; columns should expand to fill available space.

• Gap between items should be 1rem.

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.