先记住这个答案
圣杯布局通常是头部横跨全页，中间一行左侧导航、主内容、右侧补充信息，底部页脚再次横跨全页。Grid 的 grid-template-areas 能直接把这张示意图写进 CSS：每个名称代表一块矩形，子元素用 grid-area 对号入座。再给三列设置侧栏宽与弹性主栏，主内容增多时中间行自然长高。
- 区域图让页面骨架可直接读懂
- 区域同名格子必须组成矩形
- 主栏用
minmax(0, 1fr)防撑破 - 响应式重排不改变 DOM 顺序
用区域图表达页面骨架
比起为每个元素单独数网格线，区域图更容易检查某块内容是否被漏放。三行字符串必须有相同列数；同一个名称出现的格子必须连成矩形。例子中的 head 和 foot 横跨三列，中间三块各占一列。
.page {
display: grid;
min-height: 100vh;
grid-template-columns: 12rem minmax(0, 1fr) 12rem;
grid-template-rows: auto 1fr auto;
grid-template-areas: "head head head" "left main right" "foot foot foot";
gap: 16px;
}
.page > header { grid-area: head; }
.page > main { grid-area: main; }
.page > footer { grid-area: foot; }左、右侧栏还需分别写 grid-area: left 与 grid-area: right。minmax(0, 1fr) 让主栏轨道可以收缩，避免一段长代码把整个三列布局撑宽；代码块本身仍要有横向滚动或换行处理。min-height 让内容少时页脚落在页面底部，内容多时页面仍可自然变长。
窄屏如何重新排布
手机上继续保留两条 12rem 侧栏，会让正文狭窄。媒体查询中把列模板改为 minmax(0, 1fr)，区域图改为每行一个名称，例如头部、正文、左栏、右栏、页脚依次排开。子元素的 grid-area 名称无需变化，布局映射由父容器负责。
但 CSS 区域图仅改变视觉顺序。屏幕阅读器与键盘焦点仍遵循 DOM 顺序。若桌面 DOM 把右栏放在正文之前，而移动端视觉上在正文之后，使用者可能经历不一致的阅读路径。设计 HTML 时就应让语义顺序合理，再用 Grid 做不破坏阅读逻辑的排布。
区域图的好处不只是可读，还能在窄屏重写同一批区域的空间关系。桌面端左导航、正文、右侧栏三列，移动端可把三者改为单列分行；项目的 DOM 无需随断点搬来搬去。但视觉顺序可以与 DOM 顺序不同，阅读器与键盘仍按文档读，所以区域图应服务于既定的信息层级，不能拿来任意重排重要交互。
容易答错的地方
- 以为区域名称可以拼成任意图形
- 同名格子必须组成矩形，不能用 L 形的
main让正文绕过侧栏。 - 把页面宽度问题全交给
1fr - 正文中的长内容仍可能触发自动最小尺寸。轨道用
minmax(0, 1fr)，内容再单独处理溢出。
面试官还会怎么问？
不需要右栏时怎么改？
删去右栏元素，并把区域图与列模板改为两列；不要留下空的 right 区域占宽。
页脚怎样在短页面贴底？
容器使用 min-height: 100vh，中间行写 1fr 吸收剩余高度；内容多时它仍可增长。
区域图重排会改变 Tab 顺序吗？
不会。焦点仍依照 DOM 顺序移动，所以应先保证文档顺序可读。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。