FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Easy

Holy Grail Layout

15 mins

The Holy Grail layout is a famous CSS page layout that consists of a header, footer, and three columns:

  • The left column contains navigation items
  • The middle column contains the main content
  • The right column contains ads

Requirements:

  1. Header
    • Stretches horizontally across the whole page
    • Height: 60px
  2. Columns
    • Left and right columns have a fixed width of 100px
    • Center column is fluid-width
    • All columns should have equal height regardless of content
  3. Footer
    • Stretches horizontally across the whole page
    • Height: 100px
    • Should stick to the bottom of the page even if content is short
  4. Use only CSS for layout.

Code Editor

React Component

00:00
Loading...

Live Preview

See your React component