在 Chrome 或 Firefox 里调试得心应手的 CSS Grid 布局，一放到 Safari 上就错位、塌陷，甚至整个网格退化成单列流式布局。这并不代表代码写错了。

问题出在：Safari 旧版本（iOS 15.4 / macOS Monterey 12.3 之前）压根不认 row-gap、grid-template-areas、auto-fit 这些新特性关键字。更麻烦的是，即便加上 -webkit- 前缀也无济于事。因为 Safari 早在 2017 年就彻底移除了所有 Grid 私有前缀支持，只认标准语法，而且只有在特定版本下才真正启用。

确认是否真被 Safari 忽略

打开 Safari 开发者工具 → Computed 面板 → 搜索 display:。如果值不是 grid，说明整条 display: grid 声明已经被静默丢弃了。

再去 Styles 面板里看 grid-template-columns 是否显示为空或 none。这是最直接的证据。

更直观的验证办法：给子元素临时加上 outline: 1px solid red。如果 outline 紧贴着文字边缘，而非按网格线排列，说明 Grid 定位根本没启动。

真机调试务必用 eruda（通过 CDN 引入）。它的 Grid 面板能直接显示轨道编号和元素实际占用的区域，比桌面模拟器准确得多。

grid-template-areas 在旧 Safari 中失效的替代方案

旧版 Safari（≤iOS 15.3）不支持 grid-template-areas 的字符串语法。它会直接跳过整条声明，回退到流式布局。换句话说，你写的 "header main" "footer footer" 等于没写。

方法一：改用显式行列编号定位。

• header → grid-column: 1 / -1; grid-row: 1;（跨整行，第1行）
• nav → grid-column: 1; grid-row: 2;（第2行第1列）
• main → grid-column: 2; grid-row: 2;（第2行第2列）
• footer → grid-column: 1 / -1; grid-row: 3;（跨整行，第3行）

这里 -1 表示隐式最后一根线，在所有支持 Grid 的旧内核中都有效。而 span 2 则要避免使用，因为旧版 Safari 对 span 在 fallback 场景下的行为不太稳定。

必须同步补全容器的轨道定义：grid-template-columns: 200px 1fr; grid-template-rows: 60px auto 40px;。缺少这两句，旧内核可能会按 auto 撑开，导致高度塌陷或列宽异常。

gap 与 row-gap/column-gap 的兼容写法

iOS 14 及更早版本的 WebKit 不支持 row-gap 和 column-gap 单独声明，只认合写的 gap 属性。

解决方案很简单：把 row-gap: 12px; column-gap: 16px; 全部替换为 gap: 12px 16px;。

需要特别留意：如果父容器设了 overflow: hidden，在旧 Safari 下，gap 的推挤可能导致子项溢出后被裁切，看起来就像 gap “消失”了。删掉这个 overflow 声明再验证一次。

auto-fit 自动列数在旧 Safari 中的降级处理

第一步：识别危险写法。

repeat(auto-fit, minmax(280px, 1fr)) 在 iOS 15.3 及更早版本中极易被完全忽略，退化为单列或直接报错。

第二步：降级为固定列数 + @media 手动切换。

默认写死三列：grid-template-columns: repeat(3, 1fr);。小屏时通过 @media (max-width: 768px) { grid-template-columns: 1fr; } 切换。

第三步：确保 @supports 检测足够严格。

别只写 @supports (display: grid)，这样很容易误判。必须加上核心模板语法的约束：@supports (display: grid) and (grid-template-columns: 1fr)。只有这样才能准确筛掉 Safari ≤10.1、所有 IE 和大部分 Android 旧 WebView。

《夸克》非常好用的免费AI浏览器

下载APP查看