Grid 实现圣杯布局更优，因 grid-template-areas 语义清晰、SEO 友好、无需 hack；float + margin-left: -100% 易塌陷、兼容性差、维护难、响应式成本高。
用 Grid 实现圣杯布局，display: grid + grid-template-areas 就够了，不用浮动、不写负 margin、DOM 顺序天然符合 SEO 要求。
为什么不能直接用 float + margin-left: -100%？
这套老方案依赖文档流错位和视觉还原的精细配合，稍一出错就塌陷或错位，且必须加 overflow: hidden 或其他 BFC 触发方式防容器高度塌陷；IE8– 兼容性差，box-sizing 不统一时宽度计算极易翻车；移动端响应式要重写整套逻辑。
-
margin-left: -100%是相对父容器宽度计算，但若父容器没设宽（比如min-width没配），窄屏下侧栏直接被拉出视口 -
padding-left和margin-left: -100%必须严格匹配，改一个值就得同步调另一个，维护成本高 - 所有子元素都
float，后续新增元素容易意外参与浮动流，得反复加clear
grid-template-areas 写法最稳，三步到位
语义清晰、调试直观、增删区域不影响整体结构。关键不是“怎么写”，而是“为什么这样写”：
-
grid-template-areas每行字符串必须用引号包裹，且单词数与grid-template-columns列数一致，比如三列就写三个单词："header header header" -
main对应的grid-area: main必须写在 HTML 中第一个子元素位置，否则 SEO 和可访问性受损 - 左右列用固定单位（如
200px、15rem），中间用1fr，不能写auto或百分比，否则无法撑满剩余空间
示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
用 grid-column 手动定位时最容易踩的坑
不靠命名区域，靠线号控制更灵活，但也更容易静默失效——浏览器不报错，只让元素消失。
- 三列定义下，总共有 4 条网格线（1→2→3→4），
nav { grid-column: 1 / 2 }表示从第 1 条线开始、到第 2 条线结束，占第一列 -
grid-column: 2是简写，等价于2 / 3，不是“只占第 2 条线”，而是占第二列；误以为是线号本身会导致定位偏移 - 写了
grid-column: 4 / 5但只有 3 列？该元素不会报错，也不会渲染——它超出了网格范围，被丢弃 - 如果某列内容高度不够，
1fr仍会按剩余空间分配，但grid-row不显式设置时，元素不会自动跨行填满，需配合min-height或内容撑高
真正麻烦的不是写几行 CSS，而是理解「DOM 顺序」和「视觉顺序」分离这件事本身——Grid 让你天然保持语义优先，而老方案得靠一堆 hack 去补救这个分离。别为了“兼容 IE8”把自己绑死在十年前的思路上。
