grid-auto-rows 在 IE11、Safari ≤10.1、Android WebView ≤76 中完全不被识别，整条声明被解析器跳过；IE11 需用 -ms-grid-rows（推荐固定值），Safari 需改用 repeat() 或 JS 动态生成 grid-template-rows，并通过 @supports (grid-auto-rows: 100px) 精准检测。
grid-auto-rows 在 IE11、Safari ≤10.1、Android WebView ≤76 中完全不被识别——不是值失效，是整条声明被浏览器解析器跳过，子项直接按文档流堆叠或 fallback 到 display: block 行为。
IE11 中必须用 -ms-grid-rows 替代，且不能混用 fr
IE11 不支持 grid-auto-rows，也不支持 grid-template-rows: repeat(auto-fill, 100px) 这类动态语法。你必须显式写 display: -ms-grid，再配 -ms-grid-rows 定义每行高度：
-
-ms-grid-rows只接受空格分隔的长度值，如40px 1fr 60px，但 IE 对fr支持不稳定，建议全用固定值（40px 100px 60px）或auto - 若原逻辑依赖
grid-auto-rows: minmax(100px, auto)，IE 中只能退化为统一高度（如全部100px）或靠 JS 动态计算后设height -
-ms-grid-rows必须和容器内子项的-ms-grid-row精确对齐，否则某项会塌到第一行底部
Safari ≤10.1 和 iOS Safari ≤15.3 会静默忽略 grid-auto-rows
这类 Safari 版本能解析 display: grid，但遇到 grid-auto-rows 就直接丢弃整条规则，不报错也不 fallback。实际表现常是：首行正常，后续所有子项挤在第二行或堆叠成单列。
- 验证方法：用 Safari 开发者工具 → Computed 面板搜索
grid-auto-rows，若值为空字符串，说明已被忽略 - 安全替代：改用
grid-template-rows: repeat(10, 100px)（固定行数）+grid-auto-flow: row，避免触发自动行生成逻辑 - 若行数不确定，必须配合 JS 统计子项数量，动态生成
grid-template-rows字符串并注入style标签
@supports 检测必须带 grid-auto-rows 本身，不能只靠 display: grid
只写 @supports (display: grid) 会让 Safari 10.1 进入 Grid 分支，但它根本不认 grid-auto-rows，结果布局碎裂。检测必须锁定该属性本身：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
@supports (display: grid) and (grid-auto-rows: 100px)—— Safari 10.1 和 IE11 都不满足此条件，自然走外层降级 - ❌ 错误：
@supports (display: grid) and (grid-template-columns: 1fr)—— 这个组合 Safari 10.1 能通过，但grid-auto-rows仍失效 - 降级样式（如
display: flex; flex-direction: column;）必须写在@supports块外部，否则 IE11 直接跳过整个块
真正麻烦的不是写两套 CSS，而是 grid-auto-rows 的“自动”特性在旧浏览器里没有等价语义——它不像 gap 还能用 margin 模拟，这里要么硬编码行数，要么交由 JS 控制。一旦子项数量动态变化，又要求严格对齐轨道，就得放弃纯 CSS 方案。
