IE11 不支持现代 CSS Grid，仅兼容旧版 -ms-grid 语法，且无 gap、fr、grid-template-areas 等特性；Autoprefixer 不做语法降级，需手动双写或改用 Flexbox 回退。
Grid 布局在 IE11 中无法原生支持，仅能通过 -ms-grid 前缀实现有限兼容，且不支持现代 Grid 的大部分特性（如 gap、grid-template-areas、fr 单位等）。强行“适配”只会增加维护成本，建议优先评估是否真有必要支持。
IE11 只认 -ms-grid，不是加个前缀就能用现代 Grid
IE10/11 实现的是旧版 CSS Grid 规范（2011 年草案），与当前 W3C 标准完全不兼容。它只识别 display: -ms-grid 及配套的 -ms-grid-columns、-ms-grid-rows、-ms-grid-column 等属性，而 grid-template-columns 这类写法在 IE 中直接被忽略。
-
grid-gap在 IE 中完全无效，-ms-grid-gap不存在，只能靠margin模拟 -
fr单位不被支持，必须用px、%或auto替代 -
grid-template-areas无对应前缀，区域命名布局在 IE 中不可行 - 子项的
justify-self/align-self也无等效-ms-属性
Autoprefixer 不会把 grid-template-columns 转成 -ms-grid-columns
Autoprefixer 的作用是补全标准属性的浏览器前缀（如 transform → -webkit-transform），但它不会将新语法降级为旧语法。你写 display: grid，它不会帮你生成 display: -ms-grid；你写 grid-column: 2 / 4，它也不会转成 -ms-grid-column: 2; -ms-grid-column-span: 3。
- Autoprefixer 默认忽略 Grid 相关属性（除非显式启用
grid: "autoplace"配置，但该模式仅处理极简场景，且已废弃） - 即便手动配置
grid: true，它也只对部分基础属性做有限映射，无法覆盖实际项目中的复杂布局 - Vite/Webpack 5+ 默认集成 Autoprefixer，但对 Grid 的处理逻辑没变——它不负责语法降级
真要兼容 IE11，得手写两套 Grid 代码 + 条件注释或 JS 检测
没有自动工具能可靠完成现代 Grid 到 IE11 -ms-grid 的转换。若业务强要求，只能人工维护双写，并用 CSS @supports 或 JS 特性检测隔离：
立即学习“前端免费学习笔记（深入）”；
/* 现代浏览器 */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 16px;
}
.container > * {
grid-column: span 2;
}
<p>/<em> IE11 专用（必须放在后面，且用 -ms- 前缀） </em>/
@supports not (display: grid) {
.container {
display: -ms-grid;
-ms-grid-columns: 1fr 2fr 1fr;
/<em> 注意：IE 中无 gap，需给子项加 margin </em>/
}
.container > * {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
}- @supports 检测在 IE11 中本身不被支持，所以更稳妥的方式是用条件注释（
<!--[if IE]>）或 JS 判断document.documentMode -
-ms-grid-column-span的值是跨列数，不是结束列号（即span 2对应-ms-grid-column-span: 2，而非3） - IE11 的
-ms-grid不支持响应式重定义，所有断点都得单独写媒体查询 + 重新声明-ms-grid-columns
最现实的方案：用 Flexbox 回退，而不是硬撑 -ms-grid
对绝大多数所谓“需要 Grid”的布局（如卡片列表、表单分栏、简单仪表盘），Flexbox 在 IE10+ 完全可用，且语义清晰、降级平滑。与其花数天调试 -ms-grid 的行列错位和跨度计算，不如用 Flexbox 写主逻辑，再针对 IE 做微调：
- 多列等分布局 →
display: flex; flex-wrap: wrap;+ 子项设flex: 1 1 calc(33.333% - margin) - 垂直居中 →
display: -ms-flexbox;+-ms-flex-align: center; - 避免使用
gap→ 改用margin并用:not(:last-child)控制 - 构建工具里删掉
browserslist中的ie 11，让 Autoprefixer 不再为过时环境生成冗余代码
真正难搞的从来不是技术方案，而是确认“谁在用 IE11”以及“他们是否真的卡在登录页进不来”。如果只是内部系统、测试环境或极少用户，砍掉 IE11 支持反而节省后期排查 layout shift 和伪元素失效的时间。
