Problem description

Create a container that initially displays its child elements in two equal-width columns with a 1rem gap. When viewport width is less than 600px, the layout should collapse into a single column.

Goal

Write CSS in styles.css to define the grid container and apply a media query that adjusts the grid layout based on viewport width.

Constraints

• Use CSS Grid for layout.

• Apply one media query only at max-width: 600px.

• Gap between columns and rows should be 1rem.

• No JavaScript is allowed.

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.