Holy Grail Layout with Flexbox

The Holy Grail Layout

The Holy Grail layout is a classic web design pattern consisting of a header, footer, and three columns (left sidebar, main content, right sidebar). For years it was difficult to implement reliably; Flexbox makes it straightforward.

CSS Code

.page {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.header {
  flex: 0 0 100%;
}

.nav {
  flex: 0 0 200px;
  order: 1;
}

.main {
  flex: 1;
  min-width: 0;
  order: 2;
}

.aside {
  flex: 0 0 200px;
  order: 3;
}

.footer {
  flex: 0 0 100%;
  order: 4;
}

How It Works

The layout uses a single flex container with flex-wrap: wrap:

1. Header and Footer: flex: 0 0 100% forces them to occupy the full width, creating their own line.
2. Sidebars: flex: 0 0 200px gives each a fixed width of 200px.
3. Main content: flex: 1 fills all remaining horizontal space.
4. Order: The order property controls visual placement independently of HTML source order.

Responsive Adaptation

@media (max-width: 768px) {
  .nav, .aside {
    flex-basis: 100%;
  }

  .nav { order: 2; }
  .main { order: 3; }
  .aside { order: 4; }
}

On small screens, all columns become full-width and stack vertically. The order property rearranges them logically without changing HTML.

Source Order vs Visual Order

A major advantage of the Flexbox approach is that the HTML source order can be optimized for accessibility and SEO (main content first), while the visual order is controlled entirely by CSS. This separation of concerns is one of Flexbox's most powerful features.

Sticky Header Variant

Add position: sticky; top: 0; to the header element for a header that stays visible while scrolling.