grid-template-areas 在 ie11、safari ≤10.1、firefox ≤52 中完全不生效，整条声明被静默丢弃；autoprefixer 无法降级为 -ms-grid 坐标，因其语法无映射关系；必须改用 grid-row/grid-column 定位，并为 ie11 单独实现 -ms-grid 硬编码方案。
grid-template-areas 在 IE11、Safari ≤10.1、Firefox ≤52 中完全不生效，不是“部分支持”，是整条声明被浏览器静默丢弃——连带所有依赖它的 grid-area 命名都会失效。
为什么 grid-template-areas 无法靠 Autoprefixer 或前缀解决
Autoprefixer 不会、也不能把 grid-template-areas: "header nav" "main main" 翻译成 IE11 的 -ms-grid-row/-ms-grid-column 坐标。它只补前缀，不降级语法。IE11 的 display: -ms-grid 是另一套独立规范（2011 年草案），和现代 Grid 没有映射关系。你写的区域模板，IE 根本不解析，更不会推导出坐标。
-
grid-template-areas在 IE11 中被整条忽略，开发者工具里该属性显示为灰色划掉，但控制台无任何提示 - 哪怕只重复一次区域名（如
"header header"），整条声明就失效 - @supports (display: grid) 在 IE 中被整个 at-rule 忽略，既不执行也不 fallback
必须改用 line-based 定位（grid-row / grid-column）
所有现代 Grid 浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都支持显式行列定位，且不依赖 grid-template-areas。这才是真正可落地的兼容写法。
- 删掉全部
grid-template-areas声明——哪怕只用一次，老 Safari 就可能让整个display: grid块退化为 block - 用
grid-row: 1 / 3替代grid-area: header，行号从 1 开始，不能用span语法（IE/Safari 旧版对grid-row: span 2支持不稳定） - 避免
grid-column: 2 / -1这类负值终点；旧版 Safari 和 IE11 不识别，需手动换算总列数并写死grid-column-end - 媒体查询中不要只改
grid-template-areas，Safari ≤14 直接无视，必须重写整套grid-row/grid-column
IE11 必须单独提供 -ms-grid 硬编码方案
IE10/11 只认 display: -ms-grid 及配套属性，且不支持自动布局。你得自己算轨道、定坐标、写跨度——没有捷径。
- 容器先声明
display: -ms-grid，再用-ms-grid-columns和-ms-grid-rows显式定义轨道（fr单位在部分 IE 版本中解析为 0，建议用auto或像素值） - 每个子项单独设置：
-ms-grid-row、-ms-grid-column、-ms-grid-column-span（IE 不支持-ms-grid-row-span） - 对齐靠
-ms-grid-row-align和-ms-grid-column-align，但支持极差，稳妥起见用margin: auto或text-align - JS 特性检测是唯一可靠分流方式：
'grid' in document.documentElement.style，然后加类控制整体布局切换
最麻烦的不是写两套代码，而是现代 Grid 允许区域复用、自动流式填充，而 IE11 的 -ms-grid 是纯静态坐标系统——你改一个区域位置，所有相关项的坐标都得重算。别指望共用源码，也别幻想 polyfill 能兜底。真要支持 IE11，就得接受手动维护两套布局逻辑的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
