圣杯布局
Holy Grail Layout
布局模式也叫：三栏布局、左中右布局、双飞翼布局、Three Column Layout
一句话：页头和页脚横跨全宽，中间一行分成左侧栏、主内容、右侧栏三栏，两侧栏宽度固定，主内容栏自适应伸缩。
详细解释
圣杯布局是一种经典的网页结构：最上面是页头，最下面是页脚，中间一行分成三栏。左栏放导航或分类，中间放主内容，右栏放推荐、公告、目录等辅助信息。两侧栏宽度固定（比如 200px 和 240px），中间栏随窗口宽度伸缩。
名字来自早年用 float 很难把它写对，被戏称为网页布局里的「圣杯」。现在用 CSS Grid 几行代码就能实现。
它和「侧边导航+内容」的区别是多了一条右侧栏，适合同时有导航和辅助信息的门户、论坛、文档站。它和「主从布局」的区别在于三栏内容相互独立：左栏点击通常是切换分类或跳转页面，而不是在旁边打开选中记录的详情。窄屏上两侧栏一般收起，或移到主内容下方。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
页面用圣杯布局（Holy Grail）：顶部全宽页头，底部全宽页脚；中间分三栏，左栏 200px 放分类导航，右栏 240px 放热门推荐和公告，中间主内容自适应宽度且最小 480px。用 CSS Grid 实现，内容少时页脚也贴在底部；屏幕窄于 768px 时两侧栏移到主内容下方。
结构与适用场景
结构描述
顶部页头和底部页脚横跨全宽；中间一行分为固定宽度的左栏、自适应宽度的主内容栏、固定宽度的右栏。
适用场景
- 页面同时有导航分类和辅助信息，需要在主内容两侧常驻展示时
- 门户、论坛、文档站等内容型网站，主内容以阅读为主时
- 桌面端屏幕宽度充足、希望充分利用横向空间时
不适用场景
- 只有导航没有辅助信息，右栏只能空着或硬塞内容时
- 左侧选中一条记录后要在旁边查看它的详情时（应该用主从布局）
- 主要在手机上浏览、屏幕放不下三栏时
- 主内容是宽表格或看板，需要尽量多的横向空间时
常见坏用法
- 右栏没有真正有用的内容，硬塞一堆占位模块
- 中间栏不设最小宽度，窗口一缩就被两侧栏挤得很窄
- 窄屏时三栏原样保留，每栏都挤成细长一条
识别特征
- 页头和页脚横跨整个页面宽度
- 中间是左中右三栏，中间栏最宽
- 窗口缩放时只有中间栏变宽变窄，两侧栏宽度不变
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)