ie11不支持display: grid，必须手动写display: -ms-grid且置于display: grid之前；autoprefixer不自动生成-ms-grid，仅补全已有-ms-grid的配套属性；fr单位、grid-gap、grid-template-areas等语法ie11完全不支持，需降级为百分比、margin、显式行列定位等。
IE11 里 display: grid 完全不生效，不是漏前缀，是浏览器压根不解析这条声明——你必须手动写 display: -ms-grid，否则布局会直接塌成一列。
为什么 Autoprefixer 不生成 -ms-grid- 属性
Autoprefixer 不是语法转换器，它只在你源码里**已经写了 display: -ms-grid** 的前提下补配套前缀（比如把 grid-column-start 转成 -ms-grid-column）。常见失效原因：
- 源码只写了
display: grid，没并行声明display: -ms-grid -
browserslist没显式包含ie 11（last 2 versions默认忽略 IE） - 用了 IE11 完全不支持的语法：
grid-gap、grid-template-areas、minmax()、grid-auto-flow: dense，Autoprefixer 直接跳过整条规则 -
grid-column: 1 / -1或grid-column: span 2这类写法，Autoprefixer 无法映射为正整数-ms-grid-column-span，结果什么都不输出
display: -ms-grid 必须手写且顺序不能错
IE11 只认 display: -ms-grid，而且它必须写在 display: grid 前面，否则会被静默跳过。其他关键约束：
-
grid-template-columns: 1fr 2fr 1fr→ 改为-ms-grid-columns: 1fr 2fr 1fr（但 IE11 对fr支持不稳定，生产环境建议用33.33% 33.33% 33.34%或200px 400px 200px） - 每个子项都得显式定位：
grid-column: 1 / 4→ 拆成-ms-grid-column: 1+-ms-grid-column-span: 3（总列数为 3 时，终点是第 4 线） -
justify-items、align-items在 IE11 无效，对齐改用-ms-grid-column-align: center或-ms-grid-row-align: end -
grid-area无法被映射，必须手动拆解为-ms-grid-row和-ms-grid-column
@supports 在 IE11 中完全无效，fallback 必须写在外层
@supports (display: grid) 这个规则本身就不被 IE11 解析，整段会被跳过。降级样式不能依赖它分流，正确做法是：
- 外层直接写 IE11 可执行的代码：比如
display: -ms-grid+float+margin模拟间隙 - 现代 Grid 样式包在
@supports块内，仅现代浏览器生效 - 检测推荐用
@supports (display: grid) and (grid-template-columns: 1fr)，比单测display: grid更准，能筛掉 Safari 10.1 这类“半支持”环境 -
gap全系 IE 都不支持，必须用margin模拟，且所有子项加box-sizing: border-box，否则margin-right会让宽度超 100%
最常被忽略的是：IE11 的 -ms-grid 是静态网格，没有隐式轨道，所有行列位置都得手动算死；-ms-grid-column-span 只接受正整数，不识别 span 关键字或负值——哪怕只漏一个子项的定位，整个网格就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
