Problem description

You need to build a web page using CSS Grid with four areas: a header spanning the top row, a sidebar in the first column below the header, a main content area to the right of the sidebar, and an optional footer. The header and sidebar should use position: sticky so they remain visible at the top and left edges of the viewport, respectively, while the user scrolls through the main content.

Goal

Implement a CSS Grid layout that:

• Defines grid-template-rows and columns for header, sidebar, and content.

• Makes the header stick to the top of the viewport on scroll.

• Makes the sidebar stick below the header on scroll.

• Allows the main content area to scroll under the sticky header and alongside the sidebar.

Constraints

• Use only HTML and CSS (no JavaScript is allowed).

• The layout must be responsive and compatible with modern browsers.

• The header height can be dynamic but must not overlap the sidebar when sticky.

• Do not use external CSS frameworks.

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.