Holy Grail Layout

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"
}

{
  "id": "holy-grail-layout",
  "type": "layout",
  "name": {
    "zh": "圣杯布局",
    "en": "Holy Grail Layout"
  },
  "aliases": [
    "三栏圣杯布局",
    "Holy Grail Layout",
    "Sacred Grail Layout"
  ],
  "granularity": "page",
  "intents": [
    "organize-content",
    "navigate-sections"
  ],
  "tags": [
    "three-column",
    "holy grail layout",
    "responsive",
    "page-level layout",
    "grid"
  ],
  "definition": "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.",
  "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.",
  "signature": [
    "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"
  ],
  "when": [
    "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_not": [
    "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.",
  "comparison": {
    "focus": "Keeping the centre content column first in source order while preserving the classic full-width-header-and-footer, three-column composition",
    "mechanism": "CSS Grid or Flexbox declares the regions; the centre content column appears first in the HTML, and visual ordering places the two fixed-width columns on the left and right",
    "cost": "Implementation itself is now easy, but whether the right column is worth keeping must be decided deliberately, and a single-column fallback for narrow screens must be handled"
  },
  "sources": [
    {
      "id": "holy-grail-layout-ala-levine",
      "title": "A List Apart · In Search of the Holy Grail",
      "url": "https://alistapart.com/article/holygrail/",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://alistapart.com/article/holygrail/",
        "status": "available",
        "checkedAt": "2026-09-16T05:42:16.687Z",
        "jobId": "spn2-dc57e5917f8ca5350a2ae4f27290d6e22caffd4a",
        "url": "https://web.archive.org/web/20260916054240/https://alistapart.com/article/holygrail/",
        "timestamp": "20260916054240"
      }
    },
    {
      "id": "holy-grail-layout-mdn-grid-cookbook",
      "title": "MDN · Realizing Common Layouts Using CSS Grid Layout",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids",
        "status": "available",
        "checkedAt": "2026-09-16T05:42:44.311Z",
        "jobId": "spn2-f9c3f478ecc0ba29229515b1a0fc462a60148ff7",
        "url": "https://web.archive.org/web/20260916054308/https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts",
        "timestamp": "20260916054308"
      }
    },
    {
      "id": "holy-grail-layout-webdev-patterns",
      "title": "web.dev · Layout Patterns: Holy Grail",
      "url": "https://web.dev/patterns/layout/holy-grail",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://web.dev/patterns/layout/holy-grail",
        "status": "available",
        "checkedAt": "2026-09-16T05:42:56.235Z",
        "jobId": "spn2-6327139736ec25d138e022278cfb9f77f94d1e6f",
        "url": "https://web.archive.org/web/20260916054327/https://web.dev/articles/one-line-layouts#05_classic_holy_grail_layout_grid-template_auto_1fr_auto_auto_1fr_auto",
        "timestamp": "20260916054327"
      }
    }
  ],
  "relations": [
    {
      "target": "sidebar-layout",
      "kind": "related",
      "condition": "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",
      "reason": "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.",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "alternative",
      "condition": "Deciding whether the page needs to keep two fixed-width side columns at once",
      "reason": "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.",
      "basis": "editorial"
    },
    {
      "target": "modular-grid",
      "kind": "composes_with",
      "condition": "The page needs a unified row-and-column coordinate system to place the header, the three-column body, and the footer",
      "reason": "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.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "The centre content column needs to sit between the two fixed-width side columns",
      "instruction": "Regardless 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.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "The viewport narrows to the point where the three columns can no longer sit side by side",
      "instruction": "Reflow 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.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "The right sidebar holds nothing that actually helps the user's current task",
      "instruction": "Do 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.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "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"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "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.",
  "image": {
    "src": "/images/holy-grail-layout.webp",
    "alt": "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."
  },
  "searchTerms": [
    "三栏",
    "圣杯布局",
    "响应式",
    "页面级布局",
    "网格"
  ]
}