grid-template-areas 在旧版浏览器中被完全忽略，ie11、safari≤10.1、ios14及更早系统静默失效，需改用 grid-row/grid-column 显式定位并手动适配 -ms-grid。
grid-template-areas 在旧版浏览器里根本不是“部分不兼容”，而是直接被忽略——IE11、Safari ≤10.1、iOS 14 及更早系统，整条声明静默失效，连带所有 grid-area 命名引用都无效。你写的布局看起来像没加 CSS，其实浏览器压根没解析那行。
为什么不能靠 Autoprefixer 自动转 -ms-grid
Autoprefixer 对 grid-template-areas 完全无能为力：它无法从字符串模板（比如 "header header" "nav main"）反推出每个区域的行列坐标和跨度。这不是配置开关的问题，是能力边界。你必须手动拆解，否则 IE11 里所有子项默认落在第 1 行第 1 列，叠在一起。
必须改用 line-based 定位（grid-row / grid-column）
现代浏览器和旧 Safari 10.1+、Firefox 52+ 都支持显式行列线定位，且不会被静默丢弃。关键点：
-
grid-column和grid-row必须写成start / end形式，比如grid-column: 1 / -1（跨满整行），比span 2更可靠 - 行号列号从 1 开始，
-1表示隐式最后一根线，所有支持 Grid 的旧内核都认 - 容器必须显式定义
grid-template-columns和grid-template-rows，否则旧 Safari 可能塌陷高度或列宽异常 - 避免在媒体查询中只改
grid-template-areas—— Safari ≤14 根本不识别，结果仍是display: block
IE11 需要单独硬编码 -ms-grid-row / -ms-grid-column
IE11 的 -ms-grid 是静态模型，没有自动布局能力。你得自己算轨道数，再给每个元素写死坐标：
-
.header跨第一行两列 →-ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; -
.nav在第二行第一列 →-ms-grid-row: 2; -ms-grid-column: 1; -
.main在第二行第二列 →-ms-grid-row: 2; -ms-grid-column: 2; -
.footer跨第三行两列 →-ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; -
@supports (display: grid)在 IE11 中整条规则被静默忽略，必须用 JS 检测：CSS.supports('display', 'grid')
最容易被忽略的坑：区域名重复导致整条 grid-template-areas 失效
哪怕只是多打了一个空格或重复写了一次区域名（比如 "header header header"），整条 grid-template-areas 声明就会被浏览器静默丢弃——开发者工具里该属性显示为灰色划掉，控制台却完全不报错。排查兼容问题时，这个比检查 -ms- 属性更优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
