ie11 不支持现代 grid 语法，必须显式声明 display: -ms-grid 并手动转换属性：grid-column 需换算为正整数，-ms-grid-column-span 不支持负值或 span，@supports 无效，grid-gap 需用 margin 模拟，且所有子项须显式定位。
IE11 里 display: grid 完全不生效，不是漏前缀、不是配置错，是浏览器压根不解析这条声明——它只认 display: -ms-grid，现代 Grid 语法对它等于不存在。
IE11 根本不识别 display: grid，必须手动写 display: -ms-grid
Autoprefixer v9+ 已彻底移除 IE Grid 转换能力，它不会把 display: grid “变成” display: -ms-grid。你必须在源码中显式并行声明：
-
.grid { display: -ms-grid; display: grid; }—— 缺少前者，后续所有-ms-属性都不会生成 -
grid-template-columns: 1fr 2fr要配合display: -ms-grid才能被 Autoprefixer（v8 或更低）转成-ms-grid-columns: 1fr 2fr - IE11 中
fr单位虽可出现在-ms-grid-columns，但混用auto和fr（如auto 1fr）易导致渲染异常，建议统一用百分比或固定值
grid-column: 1 / -1 在 IE11 中彻底失效，必须换算为具体正整数
IE11 的 -ms-grid-column-span 只接受正整数，不支持负值、span 关键字或隐式轨道计算。Autoprefixer 遇到这类写法会直接跳过整条规则，不生成任何 -ms- 属性。
- 错误写法：
grid-column: 1 / -1、grid-column: span 3、grid-area: 1 / 1 / 2 / 4—— 全部无法映射，子项默认落在第 1 列第 1 行 - 正确做法：先数清
-ms-grid-columns定义了几列（比如1fr 2fr 1fr是 3 列），再写死终点：grid-column: 1 / 4 - 子项定位优先拆解为单侧属性：
grid-column-start: 2→-ms-grid-column: 2，grid-column-end: 4→-ms-grid-column-span: 2
@supports (display: grid) 在 IE11 中完全无效，fallback 必须写在外层
@supports 这个 at-rule 本身就不被 IE11 识别，整块规则会被静默跳过。你不能靠它给 IE 写降级样式。
- 错误方式：
@supports (display: grid) { .grid { display: grid; } }—— IE11 直接忽略，无 fallback - 正确方式：降级样式写在
@supports块外层，IE11 和 Safari 9 才能读到：.grid { display: flex; } @supports (display: grid) and (grid-template-columns: 1fr) { .grid { display: grid; } } - 双条件检测更可靠：
@supports (display: grid) and (grid-template-columns: 1fr)，能筛掉 Safari 10.1 这类“半支持”浏览器（它们认display: grid但不支持fr）
grid-gap 在 IE 全系和 Safari ≤14.1 中被完全忽略，用 margin 模拟更可控
grid-gap 不是加前缀就能解决的问题。IE 全系、Safari ≤14.1、Android WebView ≤76 都会静默忽略它，getComputedStyle(el).gap 返回空字符串。
- 横向间隙：
.item { margin-right: 12px; } .item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; } .grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙） - 避免用
padding或border模拟gap：响应式下尺寸难控制，容易撑破容器 - 所有网格项统一设
box-sizing: border-box，防止margin计算偏差
最常被忽略的点是：IE11 的 -ms-grid 是静态网格，没有自动定位能力——每个子项都得靠 -ms-grid-column 和 -ms-grid-row 显式指定位置，漏一个就会错位；且 -ms-grid-column-span 必须是正整数，不能靠工具“猜”，得你亲手算清楚总列数再写死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
