圣杯布局

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：中间内容是否真的在源码顺序中先于两侧栏、窄屏断点下是否已改写为单列且不出现横向滚动、以及右侧边栏是否装有用户实际需要的内容而不是历史习惯留下的空区域。

{
  "states": [
    "three-column",
    "single-column-narrow"
  ],
  "a11y": [
    "中间内容列在文档顺序和无障碍树中先于两侧导航与边栏出现",
    "左侧导航使用 nav/navigation 地标，右侧边栏使用 aside/complementary 地标，各自带有可访问名称",
    "窄屏下折叠为单列时，原有的地标角色与标题层级保持不变，只是不再并排显示"
  ],
  "motion": "无，或在断点切换时使用尊重减少动态偏好的短促过渡"
}

{
  "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": [
    "三栏",
    "圣杯布局",
    "响应式",
    "页面级布局",
    "网格"
  ],
  "definition": "用全宽页头、三栏正文（固定宽度左侧导航、弹性宽度中间内容、固定宽度右侧边栏）与全宽页脚组成的经典网页构图；历史上用浮动和无表格 CSS 很难同时做到中间内容列先出现在源码中、页脚全宽、标记精简这几个目标，因而被戏称为『圣杯』，如今用 CSS Grid 或 Flexbox 已经很容易实现，这个名字本身是那段历史留下的说法。",
  "boundary": "圣杯布局关注的是全宽头尾加三栏正文这个具体的页面级构图，两个固定宽度侧栏与中间弹性内容之间没有选择联动，因此不同于主从布局——主从中的侧列表选择会驱动详情内容更新。它也不同于侧栏布局：侧栏布局只讨论一条持久的侧区与主内容的关系，圣杯布局则同时约定了左右两个侧栏、全宽页头页脚，以及中间内容在源码中优先出现这一具体排布规则。",
  "signature": [
    "页面顶部有一条贯穿全宽的页头，底部有一条贯穿全宽的页脚",
    "中间是三栏正文：左侧固定宽度导航列、中间弹性宽度内容列、右侧固定宽度边栏列",
    "在 HTML 源码中，中间内容列出现在两侧栏之前，视觉上的左右排布由 CSS Grid 或 Flexbox 决定，与源码顺序无关"
  ],
  "when": [
    "页面需要同时呈现全宽头尾、左侧导航与右侧辅助信息，且三者都是页面级、彼此没有选择联动的区域",
    "用 CSS Grid 或 Flexbox 从零搭建这种经典网站构图，不依赖历史上曾经需要的浮动或表格布局手法",
    "需要让屏幕阅读器和搜索引擎先读到中间的主要内容，再读到两侧的导航或边栏"
  ],
  "when_not": [
    "只需要保留一条持久的侧区，不需要同时固定左右两个宽度不变的栏——按侧栏布局设计即可",
    "右侧边栏里没有用户当前任务需要的信息，只是沿用这个构图的历史习惯留出的空位",
    "侧栏中的选择需要驱动中间内容切换——那属于主从布局，不是这个模式要解决的问题"
  ],
  "tradeoff": "三栏构图能同时保留全宽头尾、稳定的导航与辅助信息，如今用 Grid 或 Flexbox 实现所需代码也相当精简；但『圣杯』这个名字本身是历史遗留的难度标签，照搬构图容易让右侧栏变成没有实际内容的摆设，窄屏下三栏还必须主动改写为单列，否则会出现横向滚动。",
  "comparison": {
    "focus": "让中间内容列在源码顺序中优先，同时保留全宽头尾加三栏正文的经典构图",
    "mechanism": "用 CSS Grid 或 Flexbox 声明区域，中间内容列在 HTML 中最先出现，再用视觉顺序把两个固定宽度栏放到左右两侧",
    "cost": "如今实现本身很容易，但要主动判断右侧栏是否值得保留，并处理窄屏下的单列回退"
  },
  "sources": [
    {
      "id": "holy-grail-layout-ala-levine",
      "title": "A List Apart · In Search of the Holy Grail",
      "url": "https://alistapart.com/article/holygrail/",
      "claim": "记载『圣杯』这个名字的由来：在浮动与无表格 CSS 的时代，同时做到弹性中间列加固定宽度两侧栏、中间内容列先出现在源码中、页脚全宽、标记精简这几个目标非常困难，此前的方案往往要牺牲其中之一；作者提出的方案把中间列放在源码最前面，再用负外边距与相对定位把两侧栏视觉上移到左右。",
      "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": "演示如何用 grid-template-areas 搭建页头、导航、内容、侧栏、页脚这类经典多栏构图，并强调保持源码顺序、只用 CSS Grid 改变视觉排布，以避免源码顺序与视觉呈现脱节带来的可访问性问题；同一份标记可以在不同断点下切换成单列或多栏。",
      "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": "展示如今用一行 CSS Grid 声明（grid-template: auto 1fr auto / auto 1fr auto）即可实现页头、页脚、左右两个侧栏与中间内容的圣杯构图，说明这种曾经困难的排布如今在 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": "判断页面只需要一条持久侧区，还是需要左右两个固定宽度栏加全宽头尾的完整构图",
      "reason": "侧栏布局只约定一条持久的侧区与主内容并排；圣杯布局是一个更具体的页面构图，同时固定左右两个侧栏、全宽页头页脚，并要求中间内容在源码中优先。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "alternative",
      "condition": "决定页面是否需要同时保留左右两个固定宽度的侧栏",
      "reason": "单列把全部宽度让给顺序内容；圣杯布局用两侧固定宽度栏换取导航与辅助信息的常驻可见，取舍方向相反。",
      "basis": "editorial"
    },
    {
      "target": "modular-grid",
      "kind": "composes_with",
      "condition": "需要在统一的行列坐标系里安排页头、三栏正文与页脚",
      "reason": "模块化网格提供更通用的行列坐标系，圣杯布局是在其上固定下来的一种具体三栏加头尾排布，两者概念层级不同、可以叠加使用。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "中间内容列需要出现在两侧固定宽度栏之间",
      "instruction": "无论视觉顺序如何，中间内容都必须在 HTML 源码中先于左右两栏出现，用 CSS Grid 的 grid-template-areas 或 Flexbox 的 order 属性改变视觉位置，而不是改变源码顺序。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "视口收窄到无法容纳三栏并排",
      "instruction": "让左右两个固定宽度栏与中间内容一起重排为单列，不要出现需要横向滚动才能看到内容的情况；参照 WCAG 重排标准，在 320 像素宽度下不应出现二维滚动。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "右侧边栏内容对当前任务没有实际帮助",
      "instruction": "不要只因为圣杯布局的历史构图习惯而保留一个空的右侧栏，应移除该区域，把宽度还给中间内容。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "three-column",
      "single-column-narrow"
    ],
    "a11y": [
      "中间内容列在文档顺序和无障碍树中先于两侧导航与边栏出现",
      "左侧导航使用 nav/navigation 地标，右侧边栏使用 aside/complementary 地标，各自带有可访问名称",
      "窄屏下折叠为单列时，原有的地标角色与标题层级保持不变，只是不再并排显示"
    ],
    "motion": "无，或在断点切换时使用尊重减少动态偏好的短促过渡"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：中间内容是否真的在源码顺序中先于两侧栏、窄屏断点下是否已改写为单列且不出现横向滚动、以及右侧边栏是否装有用户实际需要的内容而不是历史习惯留下的空区域。",
  "image": {
    "src": "/images/holy-grail-layout.webp",
    "alt": "一个虚构的 FIELDNOTES 页面示意图：顶部是贯穿全宽的页头条，中段是三栏——左侧窄的导航列、中间宽阔的内容列与右侧窄的边栏列，底部是贯穿全宽的页脚条；内容以抽象色块表示。"
  },
  "searchTerms": [
    "three-column",
    "holy grail layout",
    "responsive",
    "page-level layout",
    "grid"
  ]
}