VOCABULARY / ENTRY

Holy Grail Layout

holy-grail-layout

Layout & information architectureScope: Pageholy-grail-layout · v0.1.0

A classic web page composition made of a full-width header, a three-column body (a fixed-width left navigation column, a fluid-width centre content column, and a fixed-width right sidebar), and a full-width footer. Historically, achieving all of this with floats and table-free CSS at the same time -- centre content appearing first in the source, a full-width footer, and lean markup -- was hard enough that the pattern earned the joking name 'Holy Grail'; today it is easy with CSS Grid or Flexbox, and the name itself is a leftover from that history.

A fictional FIELDNOTES page diagram: a full-width header bar at the top, a three-column middle section with a narrow left navigation column, a wide centre content column, and a narrow right sidebar column, and a full-width footer bar at the bottom; content is shown as abstract blocks.

Recognizing it

A header bar spans the full width at the top of the page, and a footer bar spans the full width at the bottom
The body is three columns: a fixed-width left navigation column, a fluid-width centre content column, and a fixed-width right sidebar column
In the HTML source, the centre content column appears before both side columns; the visual left-to-right order is set by CSS Grid or Flexbox and is independent of source order

Concept boundary

The Holy Grail layout is about one specific page-level composition: a full-width header and footer around a three-column body, with no selection link between the two fixed-width side columns and the fluid centre content. That sets it apart from master-detail, where selecting an item in the side list drives the detail content. It also differs from sidebar layout: sidebar layout only concerns a single persistent side region next to the main content, while the Holy Grail layout additionally commits to a left and a right side column, full-width header and footer, and the specific rule that the centre content appears first in the source.

When to consider it

The page needs a full-width header and footer together with left navigation and a right supporting region, where all three are page-level regions with no selection link between them
Building this classic site composition from scratch with CSS Grid or Flexbox, without relying on the float or table hacks it historically required
Screen readers and search engines need to reach the centre content first, before the navigation and sidebar on either side

When to be cautious

Only a single persistent side region is needed, not two fixed-width columns held on both sides at once -- design that as a sidebar layout instead
The right sidebar holds nothing the user's current task needs; it is only an empty slot kept out of habit for this composition
A selection in the side column is meant to drive the centre content -- that is master-detail, not this pattern

Tradeoff

The three-column composition keeps a full-width header and footer plus stable navigation and supporting information, and it now takes remarkably little code with Grid or Flexbox; but the 'Holy Grail' name itself is a historical difficulty label, copying the composition verbatim easily turns the right sidebar into an unused prop, and narrow screens still require an active rewrite to a single column or the layout forces horizontal scrolling.

Conditional rules · Editorial advice

When The centre content column needs to sit between the two fixed-width side columnsMustRegardless of visual order, the centre content must appear before the left and right columns in the HTML source; change the visual position with CSS Grid's grid-template-areas or Flexbox's order property, not by changing source order.

When The viewport narrows to the point where the three columns can no longer sit side by sideMustReflow the two fixed-width side columns together with the centre content into a single column; do not leave a layout that requires horizontal scrolling to see content. Per the WCAG reflow criterion, no two-dimensional scrolling should be required at a 320-pixel width.

When The right sidebar holds nothing that actually helps the user's current taskRecommendedDo not keep an empty right sidebar purely out of habit for the Holy Grail composition; remove the region and give the width back to the centre content.

Related entries

Sidebar Layout ↗Related, but different · Deciding whether the page needs only a single persistent side region, or the full composition of two fixed-width side columns plus a full-width header and footer

Sidebar layout only commits to one persistent side region beside the main content; the Holy Grail layout is a more specific page composition that fixes both a left and a right column, a full-width header and footer, and requires the centre content to come first in the source.

Single-Column Layout ↗Conditional alternative · Deciding whether the page needs to keep two fixed-width side columns at once

Single-column gives the full width to sequential content; the Holy Grail layout trades width on both sides for navigation and supporting information that stay always visible -- the trade-offs point in opposite directions.

Modular Grid ↗Works with · The page needs a unified row-and-column coordinate system to place the header, the three-column body, and the footer

A modular grid provides the more general row-and-column coordinate system; the Holy Grail layout is one specific three-column-plus-header-and-footer arrangement fixed on top of it -- the two sit at different conceptual levels and can be combined.

Sources and what they support

A List Apart · In Search of the Holy Grail ↗

Records the origin of the name 'Holy Grail': in the era of floats and table-free CSS, achieving a fluid centre column with fixed-width side columns, centre content appearing first in the source, a full-width footer, and lean markup all at once was so hard that earlier solutions usually sacrificed one of these goals; the author's technique places the centre column first in the source and uses negative margins with relative positioning to move the side columns into view on the left and right.

Retrieved: 2026-09-15 · Archived 2026-09-16

MDN · Realizing Common Layouts Using CSS Grid Layout ↗

Demonstrates using grid-template-areas to build classic multi-column compositions of header, navigation, content, sidebar, and footer, and stresses keeping source order intact while letting CSS Grid alone change the visual arrangement, to avoid the accessibility problems of a mismatch between source order and visual presentation; the same markup can switch between single-column and multi-column arrangements at different breakpoints.

Retrieved: 2026-09-15 · Archived 2026-09-16

web.dev · Layout Patterns: Holy Grail ↗

Shows that a single CSS Grid declaration (grid-template: auto 1fr auto / auto 1fr auto) now produces the Holy Grail composition of header, footer, two side columns, and centre content, illustrating that a once-difficult arrangement is now straightforward under Grid.

Retrieved: 2026-09-15 · Archived 2026-09-16

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

No operable specimen exists yet; the illustration is an editorial sketch. Before shipping, still verify: that the centre content truly appears first in source order ahead of both side columns, that the narrow-viewport breakpoint has been rewritten into a single column without horizontal scrolling, and that the right sidebar carries content the user actually needs rather than an empty region kept out of habit.

{
  "states": [
    "three-column",
    "single-column-narrow"
  ],
  "a11y": [
    "The centre content column appears before the navigation and sidebar on either side in both document order and the accessibility tree",
    "The left navigation uses the nav/navigation landmark and the right sidebar uses the aside/complementary landmark, each with an accessible name",
    "When collapsed into a single column on narrow screens, the existing landmark roles and heading hierarchy stay the same; only the side-by-side arrangement is dropped"
  ],
  "motion": "None, or a brief transition at breakpoint changes that respects reduced-motion preferences"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.