圣杯布局的Grid实现本质是三栏流式分配，通过grid-template-areas定义命名区域，主内容区按grid-area定位且不依赖DOM顺序，响应式需重写整个模板。
圣杯布局的 Grid 实现本质是三栏流式分配
用 display: grid 实现圣杯布局，核心不是“模拟浮动”，而是直接定义三列容器：左侧边栏、主内容区、右侧边栏，并让主内容区优先占据中间视觉位置，同时允许它在 DOM 顺序中位于中间（或任意位置）。现代浏览器（Chrome 66+、Firefox 63+、Safari 14.1+、Edge 79+）原生支持 grid-template-areas 和 grid-column，无需前缀或 polyfill。
grid-template-areas 是最直观的声明方式
它把布局抽象成命名区域，语义清晰、不易错位。需确保 HTML 结构与区域名严格对应：
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
- 如果
main元素实际放在 DOM 最后，它仍会按grid-area: main渲染到中间列——Grid 不依赖源顺序 -
1fr表示弹性占满剩余空间；固定侧栏用px或rem更可控 - 不建议对
grid-template-areas中某行写成"nav . aside"来“跳过”主内容——.代表空单元格，但会导致该行高度塌缩风险，尤其当nav或aside为空时
响应式断点下必须重定义 grid-template-areas
移动端通常需要堆叠为单列，此时不能只改 grid-template-columns，否则区域映射失效。必须显式重写整个模板：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-rows: auto auto 1fr auto auto;
grid-template-columns: 1fr;
}
}
- 遗漏
@media内的grid-template-areas会导致小屏下三栏强行并排、文字溢出或横向滚动 - 若侧栏在移动端应隐藏，用
display: none即可，但注意：被设为display: none的元素仍参与grid-area分配，必须同步从模板中移除该区域名 -
grid-template-rows在媒体查询中也要匹配新结构，否则1fr可能分配给错误区域
IE11 不支持 Grid，但“兼容现代浏览器”就不用管它
当前主流项目已明确放弃 IE 支持。如果你看到文档里还提“Grid + Flex 回退方案”，基本是过时资料。真正需留意的是 Safari 旧版本（如 iOS 13.3 及更早）对 subgrid 的缺失——但圣杯布局不依赖 subgrid，所以无影响。
唯一容易被忽略的点：某些构建工具（如旧版 Autoprefixer）默认不处理 Grid，需确认配置中启用了 grid: true 选项；否则 grid-template-areas 可能被误删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
