Problem description

Design a grid layout with the following areas:

• header spanning full width

• sidebar on the left of main content

• main content area

• footer spanning full width

Layout requirements are as follows:

• Desktop (viewport ≥ 1024px): sidebar (1fr) + main (3fr) in one row under header, footer below

• Tablet (viewport ≥ 768px and < 1024px): sidebar above main in two rows, both full width

• Mobile (viewport < 768px): Only main content, header, and footer (hide sidebar)

Goal

Implement CSS rules in styles.css to define grid areas and media queries for three breakpoints, adjusting grid-template-areas, columns, and rows accordingly.

Constraints

• Use CSS Grid with named areas.

• Define three breakpoints: <768px, 768px–1023px, and ≥1024px.

• Hide the sidebar on mobile.

• Set the 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.