Task 2 — Page Layout with Grid Areas
The demo below is a grid container using grid-template-areas:
the header spans the top, the sidebar sits on the left, the main content on the
right, and the footer spans the bottom. On narrow screens the areas stack.
Demo Header
grid-area: header — spans both columns across the top.
Main Content
This area occupies grid-area: main, to the right of the sidebar.
The middle row uses 1fr, so it grows to fill available height and
both the sidebar and this section stretch together.
Columns are defined as 220px 1fr: a fixed sidebar and a fluid
content column. Rows are auto 1fr auto, so the header and footer
take only the space they need.