autoprefixer对Grid几乎没用，因其仅给display: grid加-ms-grid前缀，不处理grid-template-columns等属性，因IE的-ms-grid语法与现代Grid不兼容，强行转换会导致错位或白屏。
现代 Grid 布局在 IE10/11 和旧版 Safari 中无法靠 autoprefixer 自动兼容，必须分层处理：基础布局用 Flex 或 float 降级，增强层用 @supports (display: grid) 隔离，IE10/11 则需手写 -ms-grid 并放弃自动定位。
为什么 autoprefixer 对 Grid 几乎没用
autoprefixer 9.0+ 明确不为 grid-template-columns、grid-area 等属性加前缀——它只给 display: grid 补一个 display: -ms-grid，其余全忽略。原因很实际：IE 的 -ms-grid 语法和现代 Grid 完全不兼容，强行转换会错位甚至白屏。
- 你写了
grid-template-columns: 1fr 2fr，autoprefixer 不会生成-ms-grid-columns: 1fr 2fr（IE11 甚至不认2fr） -
grid-gap在 Safari ≤10.1 中必须写成-webkit-grid-gap，但 autoprefixer 默认不处理 - 混写
display: grid和display: -ms-grid在同一个选择器里，IE 会直接忽略后者
IE10/11 必须手写 -ms-grid，且不能依赖 auto-placement
IE10/11 的 -ms-grid 不支持 grid-template-areas、grid-auto-flow，所有位置都得硬编码行号列号。哪怕只是三栏布局，也要手动算线：
-
grid-column: 1 / 4→ 拆成-ms-grid-column: 1; -ms-grid-column-span: 3 -
grid-template-columns: 1fr 2fr→ IE10 可勉强用-ms-grid-columns: 1fr 2fr，IE11 必须换算为-ms-grid-columns: 33.33% 66.66% -
grid-row: 2→ 必须配合-ms-grid-row: 2，且父容器要先定义-ms-grid-rows
@supports 是唯一靠谱的特性检测方式
UA 判断早已失效，@supports (display: grid) 能准确筛出现代浏览器，但注意：IE11 完全不支持 @supports，所以它天然掉进降级分支。实际结构应类似：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
}- 别在
@supports块里写 IE 专用样式，它对 IE 无效 - Flex 降级方案要能真正 work：比如用
flex-basis模拟列宽，而非只靠width - 如果项目必须支持 IE10/11，
@supports后还得接 JS 检测：if ('msGridColumns' in document.documentElement.style)
移动端和旧 Safari 的 fr 单位与 gap 兼容陷阱
iOS Safari ≤10.1 支持 display: -webkit-grid，但有两处硬伤：fr 单位仅部分支持，grid-gap 必须带前缀且不继承。这意味着：
-
grid-template-columns: 1fr 1fr在 Safari 10.0 可能渲染为 0 宽，得补-webkit-grid-template-columns: 1fr 1fr -
gap: 1rem必须同时写-webkit-grid-gap: 1rem，否则间隙消失 - 别在
minmax()里混用fr和px：Safari 10.1 对minmax(200px, 1fr)解析不稳定，建议统一用minmax(200px, 1fr)或降级为minmax(200px, calc(100% - 200px))
真正难的不是写两套 Grid，而是让两套逻辑在 DOM 结构不变的前提下各自撑开、对齐、响应。一旦开始手写 -ms-grid-column，就等于放弃了所有自动计算能力——这点最容易被低估。
