Holy Grail

Description:

The Holy Grail layout is a classic web page structure that has been a common layout pattern since the early days of web design. It consists of a full-width header at the top, a full-width footer at the bottom, and a three-column content area in the center: a fixed-width left sidebar (commonly used for navigation), a flexible main content area in the center, and a fixed-width right sidebar (often used for ads or additional content).

This layout presents a real-world use case that combines semantic HTML5 elements with modern CSS layout techniques using Flexbox.

In this challenge, you will build a reusable HolyGrailLayout component using React functional components and CSS. The component must follow semantic HTML5 structure:

• <header> – Appears at the top of the page, typically used for branding or navigation.
• <aside> – Represents side content such as navigation (left) or advertisements (right).
• <main> – Contains the primary content for the page.
• <footer> – Appears at the bottom of the page and typically includes footer links or legal information.

Requirements:

• Component Structure:

  • A single React component: HolyGrailLayout
  • Contains the following layout structure:
    • Header at the top (60px tall)
    • Footer at the bottom (100px tall)
    • Three-column body in between:
      • Left Sidebar (<aside>) – Fixed width: 100px – labeled “Navigation”
      • Center Column (<main>) – Flexible width – labeled “Main Content”
      • Right Sidebar (<aside>) – Fixed width: 100px – labeled “Ads”

• UI Behavior:

  • All columns should maintain the same height regardless of content
  • The footer should stick to the bottom of the viewport, even if the page has little content
  • The layout must be responsive and maintain proportions when resized

Expected Output:

A professional, full-height layout that demonstrates proper use of semantic HTML5 elements with modern CSS. The layout should visually reflect:

• A dark header at the top (60px height)
• A light-colored content section with three columns:
  • Left column labeled “Navigation” (100px wide)
  • Center column labeled “Main Content” (expands to fill space)
  • Right column labeled “Ads” (100px wide)
• A dark footer at the bottom (100px height) that remains pinned to the bottom of the screen

This should work across various screen sizes and ensure all columns match in height visually.

Reference UI