autoprefixer v9+已移除grid降级支持，不生成-ms-grid代码；grid-column-gap/row-gap应替换为column-gap/row-gap并避免单值gap；ie11需手写两套代码且display:-ms-grid必须置于display:grid之前。
旧版 display: -ms-grid 语法必须彻底重写，不能靠 Autoprefixer 自动转换；现代 Grid 不是“升级”，而是换了一套语言。
为什么 Autoprefixer 不再生成 -ms-grid 代码
Autoprefixer v9+ 已移除对 Grid 降级的支持。它只补前缀（比如 -webkit-transform），不改语法结构。你写 display: grid，它不会帮你加 display: -ms-grid；你写 grid-column: 2 / 4，它也不会拆成 -ms-grid-column: 2 和 -ms-grid-column-span: 3。
常见误操作：
- 只写
display: grid+grid-template-columns→ Autoprefixer 完全沉默，输出里没有一行-ms- - 依赖
@supports (display: grid)包裹 IE 兼容代码 → IE11 根本不解析这个规则，整块被跳过 - 以为开了
grid: true配置就能自动双写 → 该配置早已废弃，且仅覆盖极简场景
grid-column-gap 和 grid-row-gap 怎么替换成现代写法
这两个属性属于 Grid Level 1，已被 column-gap 和 row-gap 取代，但替换不是简单改名——它们的行为有隐含差异。
关键点：
-
gap: 12px是column-gap和row-gap的简写，**单值时 row-gap 会继承 column-gap 值**，容易意外拉大行距 - 旧写法
grid-column-gap: 12px只影响列，grid-row-gap: 8px只影响行；新写法若只写gap: 12px，行距也变成 12px - Safari ≤14.0、Android WebView ≤75 等浏览器完全不识别
gap，会静默丢弃整条声明（DevTools 里显示为灰色） - 兼容性稳妥写法：
column-gap: 12px; row-gap: 8px;，不省略任一属性
IE11 降级必须手写两套代码，且顺序不能错
IE11 不支持 display: grid，也不支持 @supports，更不认 gap 或 fr。唯一可行路径是人工维护两套逻辑，并严格控制 CSS 声明顺序。
必须遵守的硬规则：
-
display: -ms-grid必须写在display: grid**之前**，否则 IE11 直接跳过私有声明 -
-ms-grid-columns: 200px 1fr 200px中的fr在 IE11 表现不稳定，生产环境建议用200px 50% 200px或固定像素 - 子项定位不能用
grid-column: 1 / -1，得拆成-ms-grid-column: 1+-ms-grid-column-span: 3（总列数为 3 时） - 间隙只能用
margin模拟：横向间隙用margin-right，最后一列需.item:nth-child(3n) { margin-right: 0; }
真正容易被忽略的兼容性陷阱
不是语法写错，而是浏览器行为静默失效：IE11 遇到不认识的属性（比如 gap、grid-area、justify-self）不会报错，也不会警告，只是整条声明当没看见——结果是布局塌陷、颜色消失、子项堆叠在左上角，调试时很难定位。
最危险的是 @supports 组合检测写法。只测 display: grid 会把 Safari 10.1 放进来，但它不支持 gap，导致间隙全无；正确做法是 @supports (display: grid) and (gap: 0) 或更严苛的 (grid-template-columns: 1fr)。
如果你的项目目标浏览器包含 macOS Monterey + Safari 15.2（仍有不少内部系统在用），那 rgb(0 0 0 / 0.5) 这类新颜色语法也会静默失效——fallback 必须前置，且不能依赖 @supports (color: rgb(0 0 0 / 0)) 来加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
