旧版 safari（ios 15.4 前 / safari ≤10.1）存在严重 grid 兼容问题：grid-template-areas 被静默忽略致 display 回退为 block，gap 需双写 -webkit-gap 才生效，fr 单位解析异常，响应式需重写整套 grid-column/row 规则而非仅改 template-areas。
旧版 Safari（iOS 15.4 前 / Safari ≤10.1）是移动端 Grid 兼容性问题的绝对主力，不是“部分不支持”，而是关键特性被静默丢弃——grid-template-areas 直接失效、gap 完全不生效、fr 单位解析异常，导致布局退化为单列流式或 display: block。
为什么 Safari ≤10.1 的 grid-template-areas 会“消失”
它不是报错，而是直接忽略整条声明，连带让 display: grid 失效回退。这不是你代码写错了，是浏览器内核压根没解析这行 CSS。
- 用 Safari 开发者工具 → Computed 面板搜索
display，若显示block而非grid，基本可确认 - 再搜
grid-template-columns，若值为空或none，就是被丢弃了 - 临时加
outline: 1px solid red到子项上，如果 outline 紧贴文字而非按网格线对齐，说明 Grid 定位根本没触发
gap 和 row-gap/column-gap 在 iOS 14 及更早版本中完全无效
这些属性在旧 Safari 中不会报错，但也不会渲染任何间距——视觉上所有网格项紧贴在一起，像没写 gap 一样。
- 必须改用合写语法
gap: 1rem（不是row-gap或column-gap单独写） - 且需加
-webkit-gap: 1rem双写，否则仍不生效 - 如果用了
grid-column-gap这类旧前缀写法，新版 Chrome/Firefox 已废弃，但旧 Safari 也不认，纯属白写
fr 单位在 Safari ≤10.1 中解析异常，常导致列宽为 0 或溢出
比如 grid-template-columns: 1fr 2fr，旧 Safari 可能把第一列算成 0px，第二列撑满容器，或者反过来。
- 避免单独依赖
fr，优先用minmax(200px, 1fr)+auto-fit组合，兼容性更稳 - 不要混用
fr和固定值如200px在同一行定义里（如200px 1fr），旧 Safari 对计算顺序处理不一致 - 真机调试务必用
eruda（CDN 引入），它的 Grid 面板能实时显示实际网格线编号和元素占用区域，比模拟器准得多
媒体查询里只改 template-areas 是最典型的“伪响应式”陷阱
很多人写 @media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; }，以为就完成了响应式切换——但 Safari ≤14 根本不识别这行，结果仍是桌面端的 grid-template-areas 或直接回退为 block。
- 必须在每个断点里重写整套定位规则：用
grid-column/grid-row显式指定行列线，例如grid-column: 1 / -1; grid-row: 1; -
-1表示隐式最后一根线，所有支持 Grid 的旧内核都认，比span 2更可靠 - 别指望
grid-auto-flow: dense在小屏下自动重排，旧 Safari 不支持该行为，内容可能错位或丢失
真正麻烦的不是写两套样式，而是 Safari 的“静默失效”机制：它不报错、不警告、不 fallback 提示，只默默退回到最基础的文档流。这意味着你必须在真机上逐个断点验证，而不是靠桌面模拟器或 DevTools 的“响应式模式”做判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
