grid-template-areas 是当前最稳的圣杯布局写法，能实现语义与视觉分离，保障 main 在 dom 最前、seo 和读屏器友好；需配合 display: grid、明确列宽及 1fr 中栏宽度，并确保引号内单词数一致且拼写匹配子元素 grid-area 值。
display: flex 或 display: grid 是当前最快速、最可靠的圣杯布局实现方式，浮动+负 margin 方案已无必要主动选用。
用 grid-template-areas 实现语义与视觉分离
这是目前最稳的写法，尤其适合需要保障 main 在 DOM 最前、SEO 和读屏器友好的场景。
-
main必须写在 HTML 最前面，例如：<main></main><aside class="left"></aside><aside class="right"></aside> - 父容器设
display: grid，并明确声明列宽：grid-template-columns: 200px 1fr 300px -
grid-template-areas每行引号内单词数必须一致，拼写要和子元素的grid-area值完全一致，例如："left main right" - 中间栏必须用
1fr，不能用auto或fit-content，否则小屏下会塌缩或溢出
用 flex + order 控制视觉顺序但需防冲突
Flex 方案代码少，但 order 值容易因嵌套或动态插入出错，不是“设了就完事”。
-
main的order必须显式设为最小值（如order: -1），左右栏分别设order: 1和order: 2 - 若父容器是
flex-direction: column，order会按垂直方向重排，三栏直接错乱 - 所有子项必须显式设置基础尺寸，例如
flex: 0 0 200px，否则flex: 1可能压缩侧边栏 - Safari 旧版本对
order计算有偏差，需加-webkit-order兼容
别再手动写浮动 + 负 margin 的“经典圣杯”
这种写法现在只剩维护老项目的兼容性价值，主动用就是给自己埋坑。
-
main必须放在 DOM 最后才能靠margin-left: -100%拉上来，直接破坏 SEO 和可访问性 - 高度不一致时易塌陷，得靠
overflow: hidden触发 BFC，副作用多（比如遮挡阴影、裁剪下拉菜单） - 响应式断点里要反复重置
float、margin、position，维护成本远高于 grid/flex - IE10 以下才真需要它——而 IE11 已于 2025 年 8 月彻底停止支持
main 在源码里最靠前、又在视觉上居中、还不被侧边栏遮住——grid-template-areas 把这三件事拆开解，比任何 hack 都干净。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
