圣杯布局的网格区域本质是主内容优先渲染与侧边栏固定位置的结合，通过grid-template-areas声明语义区域，按字符串顺序解析行，实现DOM顺序与视觉顺序分离，确保SEO和无障碍可访问性。
什么是圣杯布局的网格区域本质
圣杯布局的核心不是浮动或 flex 模拟，而是「主内容优先渲染 + 侧边栏固定位置」。CSS Grid 用 grid-template-areas 直接声明语义区域，浏览器按字符串顺序解析行，天然支持 DOM 顺序与视觉顺序分离。
关键点在于：左侧栏、主内容、右侧栏必须在 HTML 中按「左-中-右」物理顺序书写，但通过 grid-template-areas 重新映射到网格行内位置，才能保证 SEO 和无障碍可访问性。
三栏区域定义与grid-template-areas写法
用三行字符串定义区域布局，每行对应一个网格轨道（row），每个单词对应一个列轨道（column）上的单元格：
display: grid; grid-template-areas: "header header header" "left main right" "footer footer footer"; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto;
注意：grid-template-areas 中重复的单词（如 header）会自动横跨多列，无需额外设置 colspan；单词之间用空格分隔，换行即换行，引号不能省略。
- 如果左右栏要自适应（比如左侧菜单宽度随文字撑开），把
200px换成max-content或fit-content(200px) - 主内容用
1fr保证占满剩余空间，不是auto—— 否则它不会撑高容器，导致 footer 上浮 - 区域名区分大小写，
Main和main是不同区域
如何让中间栏在 DOM 中写在最前面（真正“圣杯”语义）
Grid 允许用 grid-area 把任意元素扔进指定区域，不受 HTML 顺序限制：
... ... ...
然后为它们分别指定区域：
.main { grid-area: main; }
.left { grid-area: left; }
.right { grid-area: right; }
这样 HTML 里 在最前，对爬虫和阅读器更友好，而视觉上仍是左-中-右排列。
