跳到主要内容
Termlib

布局模式 · 整体框架

圣杯布局

Holy Grail Layout

也叫：三栏布局、左中右布局、双飞翼布局、Three Column Layout

页头和页脚横跨全宽，中间一行分成左侧栏、主内容、右侧栏三栏，两侧栏宽度固定，主内容栏自适应伸缩。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

页面用圣杯布局（Holy Grail）：顶部全宽页头，底部全宽页脚；中间分三栏，左栏 200px 放分类导航，右栏 240px 放热门推荐和公告，中间主内容自适应宽度且最小 480px。用 CSS Grid 实现，内容少时页脚也贴在底部；屏幕窄于 768px 时两侧栏移到主内容下方。

发给

01判断

你的内容是这样吗？

对照两列，确认圣杯布局是不是你要找的。

符合这些情况，用圣杯布局

  • 页面同时有导航分类和辅助信息，需要在主内容两侧常驻展示时
  • 门户、论坛、文档站等内容型网站，主内容以阅读为主时
  • 桌面端屏幕宽度充足、希望充分利用横向空间时

是这些情况，换成别的

  • 只有导航没有辅助信息，右栏只能空着或硬塞内容时

  • 左侧选中一条记录后要在旁边查看它的详情时

    改用主从布局

  • 主要在手机上浏览、屏幕放不下三栏时

  • 主内容是宽表格或看板，需要尽量多的横向空间时

    改用侧边导航+内容

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    右栏没有真正有用的内容，硬塞一堆占位模块

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    中间栏不设最小宽度，窗口一缩就被两侧栏挤得很窄

  3. 03

    窄屏时三栏原样保留，每栏都挤成细长一条

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

顶部页头和底部页脚横跨全宽；中间一行分为固定宽度的左栏、自适应宽度的主内容栏、固定宽度的右栏。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页头和页脚横跨整个页面宽度
  2. 2中间是左中右三栏，中间栏最宽
  3. 3窗口缩放时只有中间栏变宽变窄，两侧栏宽度不变

04解释

详细解释

圣杯布局是一种经典的网页结构：最上面是页头，最下面是页脚，中间一行分成三栏。左栏放导航或分类，中间放主内容，右栏放推荐、公告、目录等辅助信息。两侧栏宽度固定（比如 200px 和 240px），中间栏随窗口宽度伸缩。

名字来自早年用 float 很难把它写对，被戏称为网页布局里的「圣杯」。现在用 CSS Grid 几行代码就能实现。

它和「侧边导航+内容」的区别是多了一条右侧栏，适合同时有导航和辅助信息的门户、论坛、文档站。它和「主从布局」的区别在于三栏内容相互独立：左栏点击通常是切换分类或跳转页面，而不是在旁边打开选中记录的详情。窄屏上两侧栏一般收起，或移到主内容下方。

开发者信息
术语 ID
layout-holy-grail
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-layout:has(> .ant-layout-sider ~ .ant-layout-content ~ .ant-layout-sider)
  • .el-container:has(> .el-aside ~ .el-main ~ .el-aside)
  • :has(> aside ~ main ~ aside)
  • :has(> nav ~ main ~ aside)
  • :has(> aside ~ main ~ nav)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • holy-grail
  • three-column
  • three-col
  • three-pane
  • three-panel
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30