Grid布局下圣杯与双飞翼布局天然一体，关键在于正确声明grid-template-areas并精确匹配grid-area值，漏写或错写将导致区域塌缩、错位或失效。
Grid 布局下，圣杯和双飞翼布局根本不需要“实现”——它们天然就是同一套声明的两种视觉表达，关键在于你是否漏写了 grid-template-areas 或写错了 grid-area 值。
grid-template-areas 必须显式声明每行区域名
只写 grid-template-columns: 200px 1fr 300px 不会自动把 <main></main> 放进中间列。浏览器根本不认识标签名，只认你定义的区域字符串。
- 桌面端三栏必须写成：
grid-template-areas: "header header header" "left main right" "footer footer footer" - 每个单词（如
main）是纯标识符，不能带引号；写成grid-area: "main"会被忽略 - 漏掉某区域（比如没写
left），对应元素会塌缩到网格第一格或叠在一起 - 区域名大小写敏感，
main和Main是两个不同区域
子元素必须设置匹配的 grid-area 值
HTML 结构里 <main></main>、<aside class="left"></aside> 这些标签名毫无作用，CSS Grid 不解析语义。
- 必须显式给元素加样式：
main { grid-area: main; }、.left { grid-area: left; } - 不能依赖 class 名自动映射——
.left不等于grid-area: left，必须手动写 - 如果复用旧 HTML，只需补上
grid-area声明，无需改结构或嵌套 - 多个同名区域（如两处
sidebar）会分别占用对应轨道，不是共享一个区域
响应式切换时 grid-template-areas 必须重写
移动端改成单列，不能只改 grid-template-columns: 1fr，否则浏览器仍按三列表格逻辑摆放，导致侧边栏被截断或挤在主内容旁。
立即学习“前端免费学习笔记（深入）”；
- 小屏需同步更新：
grid-template-areas: "header" "main" "left" "right" "footer" - 每行一个区域名，顺序即 DOM 渲染流顺序，也决定屏幕阅读器读取顺序
- 媒体查询中若遗漏
grid-template-areas，旧值会继承，造成错位 - 若想让侧边栏在小屏“悬浮”（如抽屉），别硬塞进同一网格——应改用
position: sticky或独立定位逻辑
最容易被忽略的一点：Grid 的等高是默认行为，不需要任何 hack；但一旦你在同一容器里混用 float 或 position: absolute，整个网格布局就失效了——Grid 容器内只应由 grid-area 控制归属，其他定位方式会破坏轨道对齐。
