旧版Edge（12–18）完全不支持repeat(auto-fill)和repeat(auto-fit)，会退化为单列堆叠；必须用@media分档固定列数+@supports检测现代Grid作为降级方案。
旧版Edge（12–18）根本不支持repeat(auto-fill)语法
EdgeHTML引擎（即旧版Edge，版本号12到18）对CSS Grid的支持停留在2016年草案阶段，repeat(auto-fill, ...)和repeat(auto-fit, ...)这两个关键字**完全未实现**。你写的这行代码在旧版Edge里会被整个忽略，grid-template-columns退化为初始值none，结果就是网格项垂直堆叠成一列——不是bug，是根本没解析。
验证方式：打开开发者工具 → 查看Computed → 找grid-template-columns，如果显示none或空值，基本可确认是此问题。
- 不能靠
@supports (display: grid)检测——它会返回true，但只表示基础Grid存在，不保证auto-fill可用 - 也不能加
-ms-前缀补救，微软从未为auto-fill提供过私有实现 - 若项目仍需兼容旧版Edge，必须降级为固定列数+媒体查询方案
替代方案：用@media + 固定repeat(n, ...)保底
既然自动填充走不通，就手动分档控制列数。关键不是“少写几行”，而是让每档的minmax()逻辑不被旧引擎误判。
示例（兼容旧版Edge + 现代浏览器）：
.grid {
display: grid;
/* 旧版Edge fallback：默认1列 */
grid-template-columns: 1fr;
gap: 1rem;
}
<p>@supports (grid-template-columns: repeat(2, 1fr))) {
.grid {
/<em> 现代浏览器启用 auto-fill </em>/
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}</p><p>/<em> 针对旧版Edge的显式分档（必须写在@supports外） </em>/
@media (min-width: 480px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}</p>
- 注意
@supports条件里用repeat(2, 1fr)而非repeat(auto-fill, ...)，否则旧版Edge会直接跳过整条规则 - 媒体查询的断点要与
minmax()中的最小宽度对齐（比如250px × 列数 + gap），避免视觉跳跃 - 所有
repeat(n, ...)里的n必须是具体数字，旧版Edge不识别calc()或变量
为什么加了-ms-grid前缀也没用
有人试过给旧版Edge加display: -ms-grid并配-ms-grid-columns，但这套IE10/11的旧网格系统和现代CSS Grid**完全不兼容**：-ms-grid没有auto-fill概念，也不支持minmax()，连fr单位都要写成1fr（带单位字符串）且仅限部分场景。
-
-ms-grid-columns: (minmax(250px, 1fr))→ 语法错误，直接失效 -
-ms-grid-columns: 250px 250px 250px→ 只能写死列宽，无法响应式 - 混用
display: grid和display: -ms-grid会导致渲染冲突，旧版Edge可能只认后者并丢弃gap等新属性
真正要检查的兼容性边界
旧版Edge的Grid支持止步于2016草案，所以以下特性全都不支持：
-
grid-template-rows: subgrid（当然也不支持subgrid本身） -
grid-area: "a b" / "c d"这种字符串语法 -
gap简写（得拆成row-gap和column-gap） -
justify-items: stretch以外的值（如center在旧版Edge中表现异常）
如果你的布局依赖其中任一特性，光解决auto-fill问题远远不够——得整体评估是否值得为旧版Edge维护两套Grid逻辑。现在绝大多数生产环境已放弃支持EdgeHTML，除非客户明确要求兼容Windows 7 + 旧版Edge组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
