safari旧版（ios 15.4/macos 12.3前）静默丢弃部分css grid特性，需通过computed面板查display是否为grid、styles中grid-template-columns是否为空，并用outline验证grid是否生效；应避免grid-template-areas、span、auto-fit等写法，改用显式行列编号、gap合写及box-sizing: border-box统一处理。

不是你写错了，是 Safari 旧版（iOS 15.4 / macOS 12.3 之前）压根没解析你写的 Grid 特性——它不报错，只是静默丢弃。

怎么确认 Safari 真的启用了 display: grid

别靠“看起来像网格”判断，必须查计算样式：

• 在 Safari 开发者工具中选中元素 → Computed 面板 → 搜索 display，如果值不是 grid，说明整条 display: grid 声明已被跳过
• 再看 Styles 面板里的 grid-template-columns，如果显示为空或 none，就是解析失败的铁证
• 临时加 outline: 1px solid red 到子项上，如果 outline 紧贴文字边缘而非对齐网格线，证明 Grid 定位根本没启动

哪些 Grid 写法在旧 Safari 中会静默失效

这些看着标准、实则危险的写法，在 iOS 15.3 及更早版本中会被直接忽略：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• grid-template-areas: "header main" → 改用显式定位：header { grid-column: 1 / -1; grid-row: 1; }
• grid-column: span 2 → 改为 grid-column: 1 / 3（-1 在所有旧内核中都有效，比 span 更稳）
• repeat(auto-fit, minmax(280px, 1fr))) → 旧 Safari 可能完全忽略 auto-fit，退化为单列；建议配合 @media 固定小屏列数，如 repeat(2, 1fr)
• row-gap: 16px 或 column-gap: 16px → 必须改用合写 gap: 16px，旧版只认这个

gap 失效的两个隐藏条件

旧 Safari 中 gap 看似“消失”，常因以下两个条件触发：

• 父容器设了 overflow: hidden → gap 推挤子项导致溢出被裁，视觉上像 gap 失效；临时改成 overflow: visible 验证
• 子项没设 box-sizing: border-box → padding/border 会让实际尺寸超出轨道，看起来像错位；所有网格项应统一加 * { box-sizing: border-box; }

真正麻烦的是“选择性执行”，不是“不支持”

Safari 旧版对标准的处理方式是：不报错、不警告，只是默默回退到流式布局。所以验证必须落到 Computed 面板和真机 outline 上，而不是靠桌面模拟器或“看起来差不多”。最常被忽略的，是以为写了 @supports (display: grid) 就万事大吉——它只管声明是否存在，不管 gap、auto-fit、grid-template-areas 是否真生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！