CSS Grid 三行代码实现圣杯布局：用 grid-template-areas 定义区域，grid-template-columns 设置左右固定、中间自适应，响应式仅需媒体查询调整行列顺序与宽度。
用 CSS Grid 实现圣杯布局，根本不需要嵌套多层 div、不用浮动、也不用负 margin——三行代码就能搞定核心结构。
用 grid-template-areas 直观定义区域
把布局当“画格子”来理解：header、footer 固定，left、main、right 水平并排，main 自适应，左右固定宽度。直接用 grid-template-areas 命名区域，一目了然：
display: grid;<br>grid-template-areas:<br> "header header header"<br> "left main right"<br> "footer footer footer";<br>grid-template-columns: 200px 1fr 200px;<br>grid-template-rows: auto 1fr auto;
这样 left 和 right 宽度固定为 200px，main 占满剩余空间，顺序无关 HTML 结构——DOM 可以按语义写成 header-main-footer，再把 left/right 放在 main 里或单独写都行。
main 内容永远居中，不被侧边栏挤偏
传统浮动/定位容易让主内容区受左右栏影响，Grid 天然隔离。只要给 main 设置 margin: 0 auto 或用 justify-self: center，它就稳稳待在中间区域，宽度随窗口缩放自动调整，响应式也只需改一两行 grid-template-columns。
立即学习“前端免费学习笔记（深入）”；
响应式只需加个 @media，无需重写结构
小屏时想变单列？不用改 HTML，也不用 JS 切换类名：
- 加一条媒体查询，把三栏改成 "header" "main" "left" "right" "footer"
- 列定义换成 grid-template-columns: 1fr
- 用 order 属性调整视觉顺序（比如让 main 排第一）
所有逻辑都在 CSS 里，HTML 干干净净，维护成本极低。
基本上就这些——Grid 的语义化布局能力，让圣杯布局从“需要技巧的难题”变成“描述清楚就行的配置”。不复杂但容易忽略，关键是别再套老思路写结构了。
