css grid 在 ie11 中部分前缀属性无效，是因为微软在早期规范草案阶段实现了旧版语法（2012版），而现代浏览器遵循的是更新后的标准（2014/2017版）。要解决这个问题，必须使用 `ms-` 前缀并严格遵循 ie11 支持的旧版布局模型，例如使用 `display: -ms-grid`、`grid-column` 对应 `grid-column-start/end` 以及 `grid-template-columns` 的特定写法。
为什么 grid-column 和 grid-row 在 IE11 中不生效？
这是因为 IE11 仅支持 2012 年版的旧语法，不支持 2014 年及以后版本的新语法。在旧语法中，网格定位属性被拆分为独立的起始和结束属性，且必须显式声明 `-ms-` 前缀。如果直接使用标准的 `grid-column` 或 `grid-row`，IE11 会直接忽略这些样式，导致布局错乱或回退到普通流。
div {
display: -ms-grid;
-ms-grid-columns: (1fr)[3];
-ms-grid-rows: (1fr)[2];
}
.item-a {
/* IE11 旧语法：必须分开写起始和结束 */
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
为什么 grid-template-columns 的简写在 IE11 中无效？
IE11 对 `grid-template-columns` 的支持非常有限，它不支持现代的 `repeat()` 函数中的自动填充逻辑，也不完全兼容复杂的 `minmax()` 组合。最稳妥的方式是使用明确的像素值或百分比，或者使用 IE11 唯一完全支持的 `repeat(count, size)` 形式，但需注意其内部实现与标准存在细微差异，特别是在处理分数单位时。
/* IE11 兼容写法 */
.grid-container {
display: -ms-grid;
/* 推荐：使用明确的列宽定义 */
-ms-grid-columns: 100px 100px 100px;
/* 或者使用 repeat，但需确保尺寸简单 */
-ms-grid-columns: repeat(3, 1fr);
}
基于 -ms-grid-rows 的具体问题
在使用 `-ms-grid-rows` 时，如果未正确设置行高，网格项可能会重叠或高度异常。IE11 要求每一行的高度必须明确指定，否则默认行为可能不符合预期。此外，`-ms-grid-row-align` 和 `-ms-grid-column-align` 用于控制对齐方式，但这些属性在 IE11 中的表现与现代浏览器的 `align-items` 和 `justify-items` 并不完全一致，需要单独调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
