圣杯布局的核心是dom中main必须位于最前，以保障加载优先级、seo权重、读屏器朗读顺序和首屏渲染速度；grid-template-areas是最稳妥的视觉重排方式，flex易因order值冲突出错，浮动方案已过时。
圣杯布局要让主体内容优先加载，核心不是“怎么排版好看”，而是“DOM顺序必须是 main 在最前”——浏览器按 HTML 顺序解析、渲染、读屏器按此朗读、搜索引擎按此抓取权重。其他所有 CSS 技巧，都是为这个语义顺序服务的。
为什么 main 必须写在 HTML 最前面？
因为浏览器从上到下解析 DOM：main 越靠前，越早开始下载资源、触发 JS 执行、完成首屏渲染。若把 nav 或 aside 放前面，哪怕它们只有一行 HTML，也会拖慢主体内容的可交互时间（TTI）。
- SEO 权重分配默认向文档流靠前的内容倾斜
- 移动端弱网下，用户可能只看到 main 就关闭页面，后面内容根本没机会加载
- 屏幕阅读器不会“跳过左栏读中间”，它严格按源码顺序播报
grid-template-areas 是最稳的视觉重排方式
用 grid-template-areas 可以完全解耦“结构顺序”和“视觉顺序”，不用负 margin、不依赖 order 值冲突、不触发重排抖动。
- 父容器必须声明 display: grid 和明确的 grid-template-columns，否则会退化成普通块流
- grid-template-areas 每行引号内单词数要一致，空格可多可少，但拼写必须和子元素的 grid-area 值**完全一致**
- 左右栏用固定单位（如 200px 或 15rem），中间必须用 1fr，不能写 auto 或 fit-content，否则在小屏下会塌缩或溢出
- 示例中若删掉 nav，只需把对应行的 "nav main aside" 改成 "main main aside" 或 "main main main"，main 仍自动撑满
Flex 实现时 order 值容易踩坑
Flex 方案看似简洁，但 order 是全局排序值，一旦嵌套子 Flex 容器或动态插入新元素，极易错乱。
- main 的 order 必须设为最小值（如 order: -1），左右栏设为 order: 1 和 order: 2，不能都用 0
- 若父容器有 flex-direction: column，order 会按垂直方向重排，彻底打乱三栏水平布局
- 不支持 IE10 及以下，且 Safari 旧版本对 order 的计算有偏差，需加 -webkit-order
- 所有子项必须显式设置 flex-basis（如 flex: 0 0 200px），否则 flex: 1 会导致左右栏被压缩
浮动 + 负 margin 方案现在只剩兼容性价值
这种写法在 2026 年已无必要主动选用，仅用于维护老项目或应对极低版本内核（如某些国产浏览器的 IE 内核模式）。
- main 必须设 width: 100%，再靠父容器 padding-left/right 挤出空间，否则会被左右栏覆盖
- left 要用 margin-left: -100% 拉回第一行，right 用 margin-left: -200px（具体值取决于自身宽度），两个值逻辑不同，极易配错
- 父容器必须触发 BFC（如 overflow: hidden），否则高度塌陷，footer 会上浮
- 所有浮动元素需配合 ::after 清除浮动，现代 CSS 已不推荐这种隐式依赖
真正难的不是写对某一种实现，而是在响应式断点中保持 main 的 DOM 优先级不变——比如在移动端折叠侧栏时，不能用 display: none 隐藏 nav 和 aside 后再用 JS 插入新结构，那会破坏初始加载顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
