VOCABULARY / 词条
圣杯布局
Holy Grail Layout
用全宽页头、三栏正文（固定宽度左侧导航、弹性宽度中间内容、固定宽度右侧边栏）与全宽页脚组成的经典网页构图；历史上用浮动和无表格 CSS 很难同时做到中间内容列先出现在源码中、页脚全宽、标记精简这几个目标，因而被戏称为『圣杯』，如今用 CSS Grid 或 Flexbox 已经很容易实现，这个名字本身是那段历史留下的说法。
识别特征
- 页面顶部有一条贯穿全宽的页头，底部有一条贯穿全宽的页脚
- 中间是三栏正文：左侧固定宽度导航列、中间弹性宽度内容列、右侧固定宽度边栏列
- 在 HTML 源码中，中间内容列出现在两侧栏之前，视觉上的左右排布由 CSS Grid 或 Flexbox 决定，与源码顺序无关
概念边界
圣杯布局关注的是全宽头尾加三栏正文这个具体的页面级构图，两个固定宽度侧栏与中间弹性内容之间没有选择联动，因此不同于主从布局——主从中的侧列表选择会驱动详情内容更新。它也不同于侧栏布局：侧栏布局只讨论一条持久的侧区与主内容的关系，圣杯布局则同时约定了左右两个侧栏、全宽页头页脚，以及中间内容在源码中优先出现这一具体排布规则。
什么时候考虑它
- 页面需要同时呈现全宽头尾、左侧导航与右侧辅助信息，且三者都是页面级、彼此没有选择联动的区域
- 用 CSS Grid 或 Flexbox 从零搭建这种经典网站构图，不依赖历史上曾经需要的浮动或表格布局手法
- 需要让屏幕阅读器和搜索引擎先读到中间的主要内容，再读到两侧的导航或边栏
什么时候慎用
- 只需要保留一条持久的侧区，不需要同时固定左右两个宽度不变的栏——按侧栏布局设计即可
- 右侧边栏里没有用户当前任务需要的信息，只是沿用这个构图的历史习惯留出的空位
- 侧栏中的选择需要驱动中间内容切换——那属于主从布局，不是这个模式要解决的问题
取舍
三栏构图能同时保留全宽头尾、稳定的导航与辅助信息，如今用 Grid 或 Flexbox 实现所需代码也相当精简；但『圣杯』这个名字本身是历史遗留的难度标签，照搬构图容易让右侧栏变成没有实际内容的摆设，窄屏下三栏还必须主动改写为单列，否则会出现横向滚动。
条件规则 · 编辑建议
相关词条
侧栏布局只约定一条持久的侧区与主内容并排；圣杯布局是一个更具体的页面构图，同时固定左右两个侧栏、全宽页头页脚，并要求中间内容在源码中优先。
单列把全部宽度让给顺序内容；圣杯布局用两侧固定宽度栏换取导航与辅助信息的常驻可见，取舍方向相反。
模块化网格提供更通用的行列坐标系，圣杯布局是在其上固定下来的一种具体三栏加头尾排布，两者概念层级不同、可以叠加使用。
来源与支持范围
记载『圣杯』这个名字的由来：在浮动与无表格 CSS 的时代，同时做到弹性中间列加固定宽度两侧栏、中间内容列先出现在源码中、页脚全宽、标记精简这几个目标非常困难，此前的方案往往要牺牲其中之一；作者提出的方案把中间列放在源码最前面，再用负外边距与相对定位把两侧栏视觉上移到左右。
检索日期：2026-09-15 · 存档于 2026-09-16演示如何用 grid-template-areas 搭建页头、导航、内容、侧栏、页脚这类经典多栏构图，并强调保持源码顺序、只用 CSS Grid 改变视觉排布，以避免源码顺序与视觉呈现脱节带来的可访问性问题；同一份标记可以在不同断点下切换成单列或多栏。
检索日期：2026-09-15 · 存档于 2026-09-16展示如今用一行 CSS Grid 声明（grid-template: auto 1fr auto / auto 1fr auto）即可实现页头、页脚、左右两个侧栏与中间内容的圣杯构图，说明这种曾经困难的排布如今在 Grid 下已经十分简单。
检索日期：2026-09-15 · 存档于 2026-09-16定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：中间内容是否真的在源码顺序中先于两侧栏、窄屏断点下是否已改写为单列且不出现横向滚动、以及右侧边栏是否装有用户实际需要的内容而不是历史习惯留下的空区域。
{
"states": [
"three-column",
"single-column-narrow"
],
"a11y": [
"中间内容列在文档顺序和无障碍树中先于两侧导航与边栏出现",
"左侧导航使用 nav/navigation 地标，右侧边栏使用 aside/complementary 地标，各自带有可访问名称",
"窄屏下折叠为单列时，原有的地标角色与标题层级保持不变，只是不再并排显示"
],
"motion": "无，或在断点切换时使用尊重减少动态偏好的短促过渡"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。