Grid 三栏布局本质是左右固定宽、中间自适应、DOM顺序保持main在前且视觉左-主-右排列；需同时声明grid-template-columns与grid-template-areas，且子元素必须显式设置grid-area匹配区域名，HTML标签名不自动映射。
用 grid-template-columns 和 grid-template-areas 定义三栏轨道与语义
圣杯/双飞翼的本质需求是：左右固定宽、中间自适应、DOM顺序保持 main 在前，且视觉上左-主-右排列。Grid 直接满足这三点，无需 hack。
核心声明只有两行：
-
grid-template-columns: 200px 1fr 300px—— 左栏 200px、右栏 300px、中间自动填满剩余空间 -
grid-template-areas: "header header header" "left main right" "footer footer footer"—— 显式声明区域名，main元素必须配grid-area: main才能落入对应轨道
漏掉 grid-template-areas，只写 grid-template-columns，浏览器不会按元素标签名（如 <main>）自动映射区域——它只认你定义的字符串名。
为什么不能直接用 <main> 标签名当 grid-area 值
HTML 标签名和 Grid 区域名完全无关。<main> 是语义化标签，但 Grid 不解析语义，只匹配你写的 grid-area 值。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 写了
main { grid-area: main; }，但没在grid-template-areas里声明"left main right"→ 元素被挤到网格外或叠在一起 - 误以为
<aside class="left">加了 class 就自动归属left区域 → 必须显式设grid-area: left - 把
grid-area写成grid-area: "left"（带引号）→ CSS 解析失败，该属性失效
响应式切换时，grid-template-columns 改单列要同步重定义 grid-template-areas
小屏下改成单列，不能只改列数，否则区域映射会错乱。比如：
/* 桌面端 */
.container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
}
<p>/<em> 移动端 </em>/
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-areas: "header"
"main"
"left"
"right"
"footer";
}
}注意：grid-template-areas 每行一个区域，顺序即 DOM 渲染流顺序。这里把 left 和 right 放在 main 下方，符合移动端阅读习惯；若仍想让侧边栏悬浮，就该换用 position: sticky 或单独抽离逻辑，而不是硬塞进同一网格。
别用 float 或 position 混入 Grid 容器
一旦父容器设了 display: grid，子元素的 float、position（除 sticky）、display: inline-block 等布局相关声明基本失效——Grid 是独立的布局上下文。
容易踩的坑：
- 为兼容旧代码，在 Grid 容器里保留
float: left→ 该元素脱离 Grid 轨道，可能覆盖其他格子或塌陷 - 给某个子项加
position: absolute→ 它脱离网格流，但依然受grid-area影响定位基准（如果容器没设position: relative，就会相对视口定位） - 用
margin强行微调位置 → 破坏 Grid 的对齐能力，且响应式时难维护
真正需要“浮动式”行为（比如文字环绕），应该用 shape-outside 或 flow-into（CSS Regions，已废弃），而不是回退到 float。
