Problem description

Design a layout:

• Parent grid areas include header, sidebar, content, and footer.

• Content area is subdivided into two-row child grid:

  • hero top spanning full width

  • Bottom row split into features (left, spanning 2fr) and data-panels (right, spanning 1fr, and two stacked items)

Breakpoints include the following:

• Mobile (<600px): Single-column parent and child grids

• Tablet (600px–900px): Two-column parent (sidebar 1fr, content 3fr) with child grid in single column

• Desktop (>900px): Two-column parent (sidebar 1fr, content 4fr) and child grid bottom row features and data-panels side by side

Goal

Implement nested CSS Grid definitions in styles.css for both parent and child grids, with media queries controlling layout at three breakpoints.

Constraints

• Use CSS Grid for all layouts (parent and nested).

• Define three breakpoints at 600px and 900px.

• Set the parent grid gap to 20px.

• Set the child grid gap to 10px.

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.