autoprefixer 不自动将 display: grid 转为 -ms-grid，仅在源码已含 display: -ms-grid 时补全配套属性；需手动书写 -ms- 前缀、显式配置 browserslist: ["ie 11"]、确保插件顺序正确，并用 @supports 隔离现代语法。
Autoprefixer 从不自动把 display: grid 转成 display: -ms-grid，它根本不是语法转换工具——你没手动写 -ms- 开头的声明，它就什么也不会生成。
为什么 Autoprefixer 完全不输出 -ms-grid 相关属性
常见现象是：配了 browserslist: ["ie 11"]、开了 grid: true，编译后 CSS 里一条 -ms- 都没有。原因很直接：
- Autoprefixer 只补前缀，不改语法；它只在你源码中**已经写了
display: -ms-grid** 的前提下，才可能补-ms-grid-columns等配套属性 -
browserslist里必须显式写ie 11（不能写last 2 versions或ie >= 11，后者 autoprefixer 不识别） - PostCSS 插件顺序错误：如果
postcss-preset-env在autoprefixer前运行，它可能提前把-ms-grid转成现代语法，导致 autoprefixer 看不到目标 - 用了 IE11 完全不支持的写法（如
grid-column: 1 / -1、grid-gap、minmax()），autoprefixer 会整条规则跳过，不生成任何前缀
IE11 中 display: grid 失效的根本原因
不是漏前缀，是 IE11 根本不解析 display: grid 这条声明——它被浏览器直接忽略，计算样式里 display 值回退到 block 或其他默认值。真正能生效的只有：
-
display: -ms-grid（必须手动写，且放在display: grid之前，否则会被覆盖） -
-ms-grid-columns和-ms-grid-rows必须显式定义（IE 没有隐式轨道，fr单位在部分旧版本中也不稳，建议用auto、固定像素或百分比） - 子项定位必须用
-ms-grid-column+-ms-grid-column-span（正整数！span 2或1 / -1会失效） -
grid-area仅在容器已声明display: -ms-grid且定义了grid-template-areas时，才可能映射为-ms-grid-row/-ms-grid-column，但成功率极低，不建议依赖
如何让 Grid 在 IE11 真正可用（非全自动方案）
放弃“一键兼容”幻想，采用双版本代码 + 条件降级：
- 容器上并行写两行：
display: -ms-grid（放前面）、display: grid（放后面） - 用
@supports (display: grid)包裹现代 Grid 代码，避免 IE11 解析出错（注意：IE11 本身不支持@supports，所以这层只是给现代浏览器加隔离） -
gap必须手写替换：gap: 12px→ 改用margin或 Tailwind 的space-x/space-y - 测试时别只看源码，打开 IE11 开发者工具，直接查「计算样式」里有没有
-ms-grid-column等真实生效的属性
最常被忽略的一点：Autoprefixer 对 Grid 的支持是「被动响应」而非「主动转换」。你写的源码就是它的输入边界，超出这个边界（比如用 grid-template-areas 或负跨度），它连尝试都不会做——不是 bug，是设计如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
