IE11不解析display: grid，必须手动声明display: -ms-grid；Autoprefixer v9+已移除自动转换能力，仅在源码已写-ms-grid前提下补全配套属性，不降级语法。
IE11 不解析 display: grid，写了等于没写；必须手动声明 display: -ms-grid，且所有子项位置都得显式计算并写死。
为什么 Autoprefixer 没生成 -ms-grid-columns 等属性
Autoprefixer v9+ 已彻底移除对 IE Grid 的语法转换能力。它只在你**已写出 display: -ms-grid 的前提下**，补全配套的 -ms-grid-columns、-ms-grid-rows 等属性，不会自动把 display: grid 改成 display: -ms-grid。
- ❌ 错误写法：
.grid { display: grid; grid-template-columns: 1fr 2fr; }→ Autoprefixer 完全不处理 - ✅ 正确写法：
.grid { display: -ms-grid; display: grid; grid-template-columns: 1fr 2fr; }→ 才可能输出-ms-grid-columns: 1fr 2fr - 检查构建产物 CSS 文件里是否真有
-ms-grid-开头的声明，没有就说明配置或源码结构不对 -
browserslist必须显式包含ie 11，仅靠last 2 versions会被忽略
IE11 中 -ms-grid-column 和 -ms-grid-row 怎么写
IE11 的 -ms-grid 是静态网格，没有隐式轨道、不支持负索引、不识别 span 关键字，每个子项必须用整数明确指定行列起点和跨度。
-
grid-column: 2 / 4→ 拆成-ms-grid-column: 2; -ms-grid-column-span: 2 -
grid-column: 1 / -1→ 无效，需先算出总列数（比如 3 列），改写为-ms-grid-column: 1; -ms-grid-column-span: 3 -
grid-row: 3→ 对应-ms-grid-row: 3，不能省略-ms-grid-row-span: 1（虽默认为 1，但显式写更稳） -
justify-items: center在 IE11 中无效，改用-ms-grid-column-align: center
@supports 检测怎么写才不放行 Safari 10.1
单写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器进入 Grid 分支——它们能解析声明，但不支持 gap 或 fr，结果布局直接错位。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐组合检测：
@supports (display: grid) and (grid-template-columns: 1fr)，双条件筛掉绝大多数旧 WebKit 和 IE 全系 - ❌ 避免嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块被跳过，fallback 失效 - 降级样式（如
display: flex或float）必须写在@supports块**外层**，因为 IE11 和 Safari ≤9 会直接忽略整个@supports块 -
grid-gap在 IE 全系、Safari ≤14.1 中静默失效，getComputedStyle(el).gap返回空字符串，只能用margin模拟
最常被忽略的一点是：即使你配对了 display: -ms-grid 和 -ms-grid-columns，只要混用了 auto 和 fr（如 -ms-grid-columns: auto 1fr），IE11 渲染就可能错乱。生产环境建议统一用百分比或固定值，比如 50% 50% 或 200px 300px。
