IE11不支持display: grid，必须显式写display: -ms-grid并手动设置-ms-grid-column/-row等属性；Autoprefixer v9+已移除IE Grid降级，仅补前缀不改结构，且browserslist需明确包含ie 11。
IE11 不支持 display: grid，写了等于没写；它只认 display: -ms-grid，且必须手动为每个子项指定行列位置，grid-template-areas、gap、fr（部分场景下）、负索引等全部无效。
为什么 autoprefixer 没生成 -ms-grid 代码？
Autoprefixer 不是语法转换器，它不会把 display: grid 自动改成 display: -ms-grid。v9+ 版本已彻底移除对 IE Grid 的降级支持——它只补前缀，不改结构。
- 你必须在源码里**显式写出**
display: -ms-grid，Autoprefixer 才可能对其配套属性（如grid-template-columns）补上-ms-前缀 -
browserslist配置中必须明确包含ie 11，仅写last 2 versions会被忽略 - 如果用了
grid-area: header或grid-column: 2 / -1，Autoprefixer 直接跳过整条规则，不报错也不输出
怎么手写才能让 IE11 正确渲染？
核心原则：先写 IE 能懂的，再兜底现代语法；所有子项位置必须拆解为整数索引。
- 容器声明顺序必须是：
display: -ms-grid; display: grid;（-ms-在前，否则 IE11 忽略整条） -
grid-template-columns: 1fr 2fr→ 改成-ms-grid-columns: 1fr 2fr，但生产环境建议用33.33% 66.66%，因 IE11 对fr渲染不稳定 -
grid-column: 2 / 4→ 拆成-ms-grid-column: 2; -ms-grid-column-span: 2（span只接受正整数，不认span 2或负值） - 每个子项都得单独定位：
-ms-grid-row和-ms-grid-column缺一不可，不能依赖隐式轨道
为什么 @supports (display: grid) 在 IE11 中失效？
@supports 这个 at-rule 本身 IE11 就不认识，整块 CSS 会被静默跳过，既不执行也不报错。你放里面的 fallback 样式根本不会生效。
立即学习“前端免费学习笔记（深入）”；
- 真正能用于 IE10/11 的 CSS 检测只有媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) - 更可靠的方式是 JS 检测：
'grid' in document.documentElement.style，然后动态加类名控制布局切换 - 所有降级样式（比如
float或flex方案）必须写在@supports块**外面**，否则 IE11 和 Safari 9 都看不到
最常被忽略的是：IE11 下 -ms-grid 容器若没配 position: relative，里面用 position: absolute 的元素会脱离容器定位——这不是 Grid 问题，是 containing block 缺失，但容易误判为 Grid 兼容失败。
