ie10/11不支持display: grid，必须手动使用-ms-grid前缀并配合固定列数、显式行列定位及递归mixin生成兼容语法，gap等属性需彻底替换为margin等降级方案。
为什么直接写 display: grid 在 IE 中完全失效
Less 编译后输出的 display: grid 对 IE10/11 是无效语法，浏览器直接忽略整条规则，容器会退化为普通块级元素，子项堆叠、宽度失控、对齐消失——这不是样式没生效，是属性压根不被识别。Autoprefixer 不会把 display: grid 转成 display: -ms-grid，它只补前缀，不降级语法。
IE10/11 必须手动加 -ms-grid 前缀且不能用 auto-fit
IE 的旧网格模型不支持 repeat(auto-fit, ...) 或 minmax()，只能用固定列数和显式轨道定义。你得手写两套逻辑：
-
-ms-grid-columns必须是空格分隔的长度值，例如：-ms-grid-columns: (100% / 12) * 1 (100% / 12) * 1 ... - 每个网格项需用
-ms-grid-column和-ms-grid-row显式定位，不能依赖grid-column: span 3 - 无法复用现代 Grid 的语义化区域命名（
grid-template-areas），必须靠行列线编号硬算
用递归 mixin 生成 IE 兼容的 -ms-grid-columns
别手写 12 次 (100% / 12) * 1，用递归 mixin 控制列数并拼出合法字符串：
.make-ms-grid-cols(@n, @i: 1) when (@i = 1) {
-ms-grid-columns+: (100% / @n) * 1;
}
.make-ms-grid-cols(@n, (@i + 1));
}
.make-ms-grid-cols(12);
注意：-ms-grid-columns+ 是 Less 的属性追加语法，确保所有轨道拼在一行；@n 必须是编译期确定的字面量数字，不能来自计算表达式（如 @n: @cols - 1）。
gap、place-items 等属性必须彻底替换
IE 不支持 gap、justify-content（Grid 上下文）、place-items，也不能用 var(--x)。降级方案不是“加前缀”，而是换实现：
-
gap: 1rem→ 改用margin：给子项设margin-right和margin-bottom，再用.grid-row负边距抵消首行/首列 -
place-items: center→ 改用text-align: center+line-height或绝对定位模拟 -
grid-template-areas→ 改用类名组合（如.grid-header+.grid-main）配合float或position
真正难处理的不是写两套代码，而是让现代 Grid 的响应式断点与 IE 的固定列数逻辑保持视觉一致——比如小屏 4 列、中屏 8 列，在 IE 里就得分别生成两套 -ms-grid-columns 并用媒体查询切换，且每套都要重算子项的 -ms-grid-column 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
