最干净可控的三栏布局方案是纯 CSS Grid：必须显式声明 grid-template-areas 并与子元素 grid-area 值严格匹配（不带引号），配合 grid-template-columns 使用 1fr 实现自适应，响应式需同步重写 grid-template-areas，且禁用 float、position 等破坏性属性。
直接用 grid-template-columns + grid-template-areas 就行，不需要 hack、不用负 margin、不碰 float 或 position —— 这是当前最干净、最可控的实现方式。
grid-template-areas 必须显式声明，不能靠标签名自动匹配
很多人写了 main { grid-area: main; } 却发现布局错乱，原因就是漏了 grid-template-areas。CSS Grid 不解析 HTML 标签名，<main></main> 和 grid-area: "main" 完全无关。
- 必须在容器上写
grid-template-areas: "header header header" "left main right" "footer footer footer" - 每个子元素要手动设
grid-area: left、grid-area: main等，值必须和grid-template-areas里写的字符串完全一致（不带引号） - 写成
grid-area: "left"（带引号）会导致该属性被浏览器忽略，元素会掉出网格
grid-template-columns 定义轨道宽度，1fr 是关键
1fr 不是“1份”，而是“剩余可用空间均分后的一份”。它让中间栏真正自适应，且不会压缩侧边栏。
- 典型写法：
grid-template-columns: 200px 1fr 300px→ 左栏固定 200px，右栏固定 300px，中间填满剩余 - 避免用
%或auto：比如200px auto 300px在内容少时会让中间栏缩成一条线 - 如果三栏都要等宽，用
1fr 1fr 1fr；若左中右比例为 1:2:1，则写1fr 2fr 1fr
响应式切换时，grid-template-areas 必须同步重写
只改 grid-template-columns 不够。小屏下单列，但 grid-template-areas 还是三列定义，会导致区域错位或元素堆叠。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
grid-template-areas: "header header header" "left main right" "footer footer footer" - 移动端（
@media (max-width: 768px)）：grid-template-areas: "header" "main" "left" "right" "footer" - 注意顺序：这里把
left和right放在main下方，符合移动阅读流；若想让它们悬浮，应抽离逻辑，别硬塞进同一网格
最容易被忽略的是：Grid 布局一旦启用，就不要再混入 float、position: absolute 或 display: inline-block。这些会破坏网格项的定位上下文，轻则样式失效，重则触发不可预测的重排。
