grid-template-areas 是最稳的视觉重排方式，因其将 html 结构与视觉布局彻底分离，不依赖负 margin、order 值或触发重排抖动，只需父容器设 display: grid 和 grid-template-columns，子元素通过 grid-area 绑定区域名即可；每行引号内单词数必须一致，区域名大小写敏感且不可含空格或特殊字符，中间列推荐 1fr，左右栏宜用固定单位，ie11 不支持需降级处理。
现在做圣杯布局，别再手动算 margin-left: -100% 和 padding 了——现代浏览器下用 display: grid 或 display: flex 一行声明就能稳住结构，DOM 顺序、SEO、可访问性全保。
为什么 grid-template-areas 是最稳的视觉重排方式
它把“HTML 写法”和“页面怎么排”彻底分开，不依赖负 margin、不靠 order 值打架，也不触发重排抖动。只要父容器设了 display: grid 和 grid-template-columns，子元素只管填 grid-area 值就行。
-
grid-template-areas每行引号里的单词数必须一致，比如"nav main aside"，删了nav就得改成"main main aside"，不能少一个空格或拼错字母 - 左右栏宽度建议用固定单位（如
200px或15rem），中间必须写1fr；写auto或fit-content在小屏下会塌缩甚至溢出 - 如果项目要兼容 IE11，
grid-template-areas会直接失效——IE11 只支持旧版 Grid 语法（grid-row/grid-column），得单独加前缀或换方案
Flex 实现时 order 值为什么总出错
order 看似简单，实则极易被嵌套结构、动态插入或旧版 Safari 的计算偏差带偏。它不是局部排序，而是整个 flex 容器内所有子项的全局序号。
-
main必须设order: -1（最小值），.left和.right分别设1和2；都用0就等于没排，顺序由 HTML 位置决定 - 若父容器是
flex-direction: column，order会按垂直方向重排，三栏立刻变上下堆叠，而不是你要的左右夹主内容 - 所有子项必须显式声明
flex-basis，比如flex: 0 0 200px；只写flex: 1会让左右栏被压缩，尤其在窄屏下 - Safari 13.1 之前对
order的解析有偏差，需补-webkit-order
浮动 + 负 margin 方案现在只剩维护价值
这种写法在 2026 年已无主动选用理由，仅用于读老代码、修 IE 内核国产浏览器或应付某些政企系统强制要求的低版本渲染模式。
-
.center必须写width: 100%，否则会被左右栏覆盖；margin-left: -100%是相对父容器宽计算，margin-left: -200px则必须和侧栏实际像素宽严格一致 -
overflow: hidden不只是为了清浮，更是触发 BFC 防止高度塌陷；换成zoom: 1虽兼容 IE6，但现代浏览器里会丢失 BFC 行为 - 窄屏下若没设
min-width（如min-width: 600px），负 margin 会把侧栏拉出视口，引发横向滚动条 -
position: relative不是为定位本身，而是给left/right提供偏移锚点；漏掉它，文字会被侧栏遮住
真正难的不是写出来，而是判断该用哪个方案：Grid 最直观但 IE11 不认；Flex 更通用但 order 易翻车；浮动方案现在只配出现在错误日志里——除非你正对着一段 2008 年的遗留代码发呆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
