Safari 16.3及更早版本存在Grid语法半支持问题：grid-template-areas、row-gap/column-gap、auto-fit会被静默忽略，导致布局退化为block流；需用Computed面板验证display和grid属性是否生效，并改用grid-column/row定位、gap合写、固定列数等兼容方案。
不是 Safari 16 本身有问题，而是你写的 Grid 代码触发了它对部分语法的“半支持”行为——grid-template-areas、row-gap、auto-fit 在 Safari 16.3 及更早版本中会被静默忽略，布局退化为 display: block 或单列流，不是 bug，是解析器直接跳过整条声明。
怎么确认真是 Safari 16 的兼容性问题
别靠眼睛看“好像不对”，用真机或 Safari 桌面版（开启 Develop 菜单）打开开发者工具 → Computed 面板：
- 搜
display：如果值是block或空白，说明display: grid被整条丢弃 - 搜
grid-template-columns：如果显示none或空字符串，基本锁定是 Safari ≤16.3 不识别该语法 - 临时加
outline: 1px solid red到子元素上：如果 outline 紧贴文字边缘、没对齐网格线，证明 Grid 定位根本没启动
必须禁用 grid-template-areas 并改用数字线定位
grid-template-areas 是 Safari 16.3 及更早版本的最大雷区——只要出现，整条 display: grid 规则被跳过，回退成 display: block。删掉它是最有效的第一步。
- header 跨整行第一行 →
grid-column: 1 / -1; grid-row: 1; - nav 在第二行第一列 →
grid-column: 1; grid-row: 2; - main 在第二行第二列 →
grid-column: 2; grid-row: 2; - footer 跨整行第三行 →
grid-column: 1 / -1; grid-row: 3; -
-1表示隐式最后一根线，所有支持 Grid 的旧内核都认；比span 2更可靠 - 同时父容器必须显式定义
grid-template-columns: 200px 1fr;和grid-template-rows: 60px auto 40px;，否则 Safari 可能按auto撑开导致高度塌陷
用 gap 替代 row-gap/column-gap，并注意 overflow: hidden 的干扰
Safari ≤16.3 不支持 row-gap 或 column-gap 单独声明，只认合写的 gap。写 row-gap: 12px 就等于没写，子项会紧贴错位。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 把
row-gap: 12px; column-gap: 16px;全部替换为gap: 12px 16px; - 如果父容器设了
overflow: hidden，旧 Safari 下gap推挤可能导致子项溢出被裁，看起来像 gap “消失”——先删掉这个overflow再验证 - 别依赖
@supports (gap: 0)做分流，Safari 15.4–16.3 中存在路径 bug，尤其配合grid-auto-flow: column时表现异常
降级 repeat(auto-fit, ...)，避免自动列数推导失效
auto-fit 在 Safari iOS 15.3 及更早、macOS Monterey 12.3 之前版本中可能被完全忽略，导致布局退化为单列或报错。这不是兼容性差，是压根不识别这个关键字。
- 第一步：识别风险 —— 如果你用了
repeat(auto-fit, minmax(280px, 1fr)))，就属于高危写法 - 降级方案：用固定列数 + 媒体查询切换，例如
grid-template-columns: repeat(3, 1fr);，再在大屏下用@media (min-width: 768px) { ... }扩展 - 确保
@supports检测足够严格：@supports (display: grid) and (grid-template-columns: 1fr)，单写@supports (display: grid)会让 Safari 16.1 这类“半支持”版本误入 Grid 分支，后续属性全部失效
最常被忽略的是：Safari 16.3 对 gap 的支持有路径分支 bug，当 grid-template-areas 缺失且启用了 grid-auto-flow: column 时，gap 会被静默丢弃——这种组合问题很难复现，但一旦出现，必须手动验证每一条声明是否真正生效，不能只看代码有没有写。
