为什么你的CSS网格布局在Safari上乱了？排查修复记

上周同事火急火燎找我：“Chrome 里好好的，Safari 上整个页面跟地震了一样，卡片全挤到一列去了。” 我打开电脑一看，果然，CSS Grid 布局在 Safari 里直接“躺平”了。排了一下午的雷，发现其中不少问题其实是“老生常谈”，但确实容易踩。今天就把这次排查记录整理出来，希望能帮到正被 Safari 折磨的你。

先别急着改代码，看一眼版本

很多人忽略了一个关键前提：Safari 浏览器已经内置在 macOS 和 iOS 里了，但是老设备上的老版本 Safari（尤其是 14 及以下）依然大量存在。Grid 布局本身早在 2017 年的 Safari 10.1 就支持了，但“支持”不等于“支持得一模一样”——很多特性是后来才补全的。

我第一步就是确认同事在哪个 Safari 版本上测的。如果是 iOS 14 以下的设备，`gap`（也就是 `grid-gap`）属性根本不认，间距全部消失；如果是 Safari 15 以下的，一些复杂的 `grid-template-areas` 缩写可能会解析出错。

排查第一步：先确认是不是“旧版支持”问题。 用 Can I Use 查一下你用的属性在目标 Safari 版本上的支持度，这一步能省下大量无谓的挣扎。

最常见的“凶手”：隐式网格行高崩塌

那次故障的页面结构大概是这样的：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
}

在 Chrome 里，一切正常，每行卡片都能自动撑开。但在 Safari 里，所有卡片都被压成了一团，内容重叠。

问题出在 `grid-auto-rows: min-content`。Safari 对 `min-content` 的计算逻辑和 Chrome 不一样，尤其是在卡片里有长文本或图片时，Safari 会把行高压到内容的最小可能高度——哦不对，是比最小可能还小——导致内容溢出去。

修复方案有两条路：

1. 改用手动设置行高，比如 `grid-auto-rows: auto`。虽然看着差不多，但 `auto` 在 Safari 里的计算更符合直觉。
2. 如果要保留自适应的美感，就显式写成 `grid-auto-rows: minmax(auto, max-content)`。用 `minmax` 包装一下，给浏览器一个明确的下限参考，Safari 就不会乱压了。

另一个隐藏点：min-width 默认值

这个坑藏得更深，不仔细看样式表根本发现不了。假设你设了一列很窄的侧边栏：

.sidebar {
  grid-column: 1;
}

.content {
  grid-column: 2;
}

网格容器本身宽度是够的，但在 Safari 中，如果某个网格项内部有很长的英文单词或长链接，那个格子会被内部内容“撑破”，把整个页面顶出横向滚动条。

这就是 网格项的默认 `min-width: auto` 在作怪。Chrome、Firefox 都对网格项做了特殊处理，而部分 Safari 版本会遵循 `auto` 的原始语义：内容最小尺寸优先，然后撑破轨道。

这个问题在 Chrome 上根本测不到，因为 Chrome 已经修正为 `min-width: 0` 的效果了。

解决：给你希望收缩的网格项加上 `min-width: 0`（纵向就是 `min-height: 0`）。这是一个几乎无副作用的防御性声明，建议在设置网格模板时顺手给所有不需要撑开的子项加上。

百分比高度的“薛定谔式”渲染

还有一种情况比较悬：网格容器没有明确高度，子项用百分比撑满整行，比如：

.grid-container {
  display: grid;
}

.item {
  height: 100%;
}

这在 Chrome 中没问题，因为 `.grid-container` 的高度由内容决定，`.item` 作为一个网格项，它的块级高度本身就拉满了整个轨道，再加 `height: 100%` 可以正常解析。但 Safari 里，如果网格容器的高度是隐式推导出来的——注意，是 隐式高度，不是 `height: auto`，而是压根没设置——此时 `100%` 会解析成 `auto` 的实际效果，但 `100%` 又会给父级一个循环引用——于是某些项目的高度就会塌陷。

这种问题最迷，因为你加一个 `height: 1px` 给父级，布局反而正常了——这实际上是在强制触发渲染引擎的“防递归”机制。

**遇到百分比高度的问题，先检查你的网格容器有没有一个“可确定”的高度来源。** 如果确实没有固定的高度，那就放弃百分比，改用 `align-items: stretch`（网格默认行为）来拉全身高，而不是调子项的高度。

最后的建议：千万别只测 Chrome

很多团队的开发主浏览器都是 Chrome，但上线前绝对要在 Safari 里过一遍。尤其注意 iOS 的 Safari，它和 macOS Safari 在某些版本上还是双轨演进，iOS 24 的 Safari 和 macOS 15 的 Safari 表现都可能不同——别问我怎么知道的，都是血泪。

当然最实用的流程是：重要布局写好后，在 Safari 技术预览版和最新稳定版里各看一遍，然后去 BrowserStack 或本地 Xcode 模拟器里跑一跑 iOS 环境，把低版本兼容问题提前暴露出来。

CSS Grid 规范本身已经非常成熟，但 Safari 的“尾巴”还在慢慢跟上。趁着这些问题还在，多一些防御性写法，比事后加班排查要轻松得多——痛过一次的你，自然就懂了。