Holy Grail Layout

Holy Grail Layout Demo

Classic layout with header, footer, and three columns. Uses CSS Grid with sticky header. Resize the window to see responsive behavior!

The Holy Grail Layout

The Holy Grail layout is a classic web design pattern featuring a header, footer, and three columns (two sidebars and main content). Historically, this was difficult to achieve with pure CSS, but modern CSS Grid makes it trivial.

Key Features

This implementation uses CSS Grid to create a flexible, responsive layout. The header is sticky and stays at the top during scrolling. The sidebars have fixed widths while the main content area is flexible.

Grid Template Areas

The layout uses grid-template-areas for intuitive layout definition. This makes the structure clear and easy to modify:

Desktop Layout (3 columns)

grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";

Responsive Behavior

On tablets and mobile devices (under 992px), the layout transforms into a single column stack. The sidebars move below the main content to prioritize the most important information.

Mobile Layout (1 column)

grid-template-areas:
    "header"
    "main"
    "left"
    "right"
    "footer";

Sticky Header

The header uses position: sticky with top: 0 to remain visible while scrolling. This provides constant access to navigation without taking up permanent space.

Advantages of This Approach

  • Clean, semantic HTML structure
  • Flexible and maintainable CSS
  • Responsive without JavaScript
  • Excellent browser support
  • Easy to customize and extend

More Content

Scroll down to see the sticky header in action. The sidebars contain supplementary navigation and widgets, while this main area contains the primary content.

Use Cases

This layout pattern works well for blogs, documentation sites, admin panels, and any application where you need persistent navigation with multiple content areas. The fixed-width sidebars provide structure while the flexible center keeps content readable.

Browser Support

CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge). For older browsers, you can provide a flexbox fallback or use feature detection with @supports.