Holy Grail

Build the holy grail layout — the classic page shape with a full-width header on top, a full-width footer on the bottom, and three columns in between: a navigation sidebar, a flexible main content area, and a secondary sidebar. It earned its name because, for years, doing it well (fluid centre, fixed sidebars, equal heights, sensible source order) was genuinely hard with the tools of the time. With CSS Grid it's now a few lines — which is exactly what this exercise teaches.

Signature

// A self-contained, presentational component. No props, no state.
function App(): JSX.Element;

Render five regions — header, nav, main, aside, footer — arranged in the holy-grail shape.

Examples

┌──────────────── header ────────────────┐
│  nav   │         main          │ aside  │
└──────────────── footer ────────────────┘

- header & footer span all three columns
- nav & aside are fixed width; main fills the remaining space
- all three middle columns share the same height

Notes

• Grid is the natural fit. grid-template-areas lets you name the five regions and "draw" the layout in CSS — the centre column flexes (1fr) while the sidebars stay fixed.
• Header and footer span full width. They each occupy all three columns; only the middle row is split into three.
• Equal-height columns come for free. Grid rows stretch their cells, so the sidebars match the main column's height without any hacks.
• Out of scope. No real navigation, no responsive breakpoints required (though a single-column stack on narrow screens is a nice touch) — focus on the desktop three-column shape.