Problem description

Create a .dashboard container that holds multiple .card elements. Layout requirements are as follows:

• Mobile (<600px): 1 column

• Tablet (600px–900px): 2 columns

• Desktop (>900px): 4 columns

All cards should have equal height based on content, wrap to new rows, and maintain 20px gap.

Goal

Write CSS in styles.css to define the .dashboard grid with appropriate grid-template-columns and media queries, ensuring cards adapt to viewport width.

Constraints

• Use CSS Grid and media queries only.

• Implement exactly two media queries at min-width: 600px and min-width: 900px.

• Set the grid gap to 20px.

• Cards should maintain equal height through default CSS Grid row alignment.

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.