IE11 不支持 grid-template-areas 和 grid-area 区域名，需手动转换为 -ms-grid-row/-ms-grid-column 坐标；@supports 无效，须用 JS 特性检测；区域名重复会导致整条声明失效；现代 Grid 与 IE11 -ms-grid 无法共用同一套源码。
grid-template-areas 在 IE11 中根本不会生效
IE11 完全不支持 grid-template-areas，连带 grid-area 的区域名写法（如 grid-area: header）也无效。Autoprefixer 不会、也不能把它转成 -ms-grid-row/-ms-grid-column —— 因为它无法从字符串模板反推出每个区域的行列坐标。这不是配置问题，是能力边界。
必须手动拆解为 -ms-grid-row / -ms-grid-column 硬编码
IE11 的 -ms-grid 是静态定位模型：每个子项都得显式指定起始行、列和跨距，没有自动布局能力。你得自己算好轨道数，再把每个区域“翻译”成坐标：
-
grid-template-areas: "header header" "nav main" "footer footer"→ 至少定义 2 列 3 行 -
.header { grid-area: header }→ 改成.header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } -
.nav { grid-area: nav }→-ms-grid-row: 2; -ms-grid-column: 1; -
.main { grid-area: main }→-ms-grid-row: 2; -ms-grid-column: 2; -
.footer { grid-area: footer }→-ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2;
别指望 @supports (display: grid) 做 fallback 分流
@supports (display: grid) 在 IE11 中被整条规则静默忽略，既不执行也不报错。你不能靠它加载备用 CSS。真要兼容，得用 JS 特性检测：
if (CSS.supports('display', 'grid')) {
document.documentElement.classList.add('supports-grid');
} else {
document.documentElement.classList.add('no-grid');
}然后在 CSS 里写：.no-grid .container { display: flex; } 或对应 -ms-grid 规则。
立即学习“前端免费学习笔记（深入）”；
grid-area 命名冲突会让整个 grid-template-areas 失效
哪怕只在 grid-template-areas 字符串里重复写了一次区域名（比如 "header header header"），整条声明就会被浏览器静默丢弃——开发者工具里该属性会显示为灰色划掉，但控制台不报错。排查时先检查这个，比调试 -ms- 属性更优先。
真正麻烦的是：现代写法里允许区域名跨多行复用，而 IE11 的硬编码必须每项单独算；两者无法共用同一套源码。这意味着你得维护两套布局逻辑，不是加个前缀就能完事。
