Safari 16.0–16.3 存在 grid-gap、grid-template-areas 和 auto-fit 的路径 bug，会导致声明静默失效，必须通过 Computed 面板验证真实渲染值而非依赖 Styles 面板。
直接说结论：Safari 16（尤其是 16.0–16.3）对 grid-gap、grid-template-areas 和 auto-fit 存在已知路径 bug，不是你代码写错，而是浏览器解析器在特定组合下会静默丢弃声明或计算错轨道——必须用 Computed 面板验证真实生效值，不能信 Styles 面板里的“写了就等于有效”。
查 display 和 grid-template-columns 是否被 Safari 真实解析
别看样式面板里有没有那行 CSS，要看它到底有没有进渲染流程：
- 打开 Safari 开发者工具 → 选中网格容器 → Computed 面板搜索
display：若值不是grid，说明整条display: grid被跳过（常见于 iOS 15.4–16.0 的灰度版本） - 再搜
grid-template-columns：若显示为none或空字符串，基本锁定是 Safari 16.0–16.2 对某些repeat()写法（如含minmax(280px, 1fr)）的解析失败 - 临时加
outline: 1px solid red到子项上：如果 outline 紧贴文字上下边缘、没对齐预期列线，证明 Grid 定位根本没启动
禁用 grid-template-areas，改用数字线号定位
Safari 16.0–16.3 在配合 grid-auto-flow: column 或嵌套 Grid 时，grid-template-areas 会被静默丢弃，且不报错。你写的 "header main" 等价于没写。
- 彻底移除
grid-template-areas声明，改用显式行列线：grid-column: 1 / -1（跨整行）、grid-row: 2（第 2 行起始） -
-1比span 2更可靠：旧内核对span的 fallback 行为不稳定，而-1是所有支持 Grid 的 Safari 版本都认的隐式最后一根线 - 必须同步补全容器轨道定义：
grid-template-columns: 200px 1fr和grid-template-rows: 60px auto 40px；缺了这些，Safari 16 可能按auto撑开导致高度塌陷
把 gap 拆成 grid-row-gap + grid-column-gap
gap 在 Safari 16.0–16.3 中存在路径 bug，尤其当父容器设了 overflow: hidden 或与 grid-auto-flow: column 共存时，间隙可能被压缩为 0 或推挤子项溢出。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
gap: 12px，改用双属性：grid-row-gap: 12px和grid-column-gap: 12px - 二者必须同时写：只写
grid-row-gap会导致列方向无间隙，视觉上仍“紧贴错位” - 避免在打印或缩放场景用
rem单位：gap: 1rem在字体缩放后，1rem变大但剩余空间不变，比例崩坏；优先用px或clamp(8px, 2vw, 16px)
检查 auto-fit 是否被 Safari 16 忽略
repeat(auto-fit, minmax(280px, 1fr))) 在 Safari 16.0–16.2 中可能被完全忽略，退化为单列流式布局，而不是“列数变少”。
- 先用
@supports (grid-template-columns: repeat(auto-fit, 0px))测试支持性（注意：不能只测display: grid） - 降级方案：改用固定列数 + 媒体查询，例如
grid-template-columns: 1fr（移动端）、grid-template-columns: 200px 1fr（桌面） - 若必须响应式列数，用
repeat(auto-fill, minmax(280px, 1fr)))替代auto-fit：Safari 对auto-fill的兼容性更稳，虽不自动收缩空列，但至少保持多列结构
真正容易被忽略的是：Safari 16 的 bug 不是全量失效，而是条件触发——比如只有当 grid-template-areas 和 grid-auto-flow: column 同时存在时才丢弃前者；所以排查必须基于真实运行时 Computed 值，而不是“我写了，它就应该有效”。
