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统一处理。
Chrome里样式正常、Safari里错位，大概率不是你写错了，而是Safari旧版（iOS 15.4 / macOS 12.3 之前）压根没解析你用的那些CSS特性——它不报错，只是静默跳过。
检查 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 及更早版本中会直接失效：
-
grid-template-areas: "header main" "footer footer"→ 改用grid-column/grid-row显式编号，比如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 没效果？先看 overflow 和 box-sizing
gap 在旧 Safari 中看似“消失”，常因两个隐藏条件触发：
- 父容器设了
overflow: hidden→gap推挤子项导致溢出被裁，视觉上像 gap 失效；临时改成overflow: visible验证 - 子项没设
box-sizing: border-box→ padding/border 会让实际尺寸超出轨道，看起来像错位；所有网格项应统一加* { box-sizing: border-box; } - 避免在 grid 容器上混用
width: 100%+padding，改用inset: 0+padding或嵌套一层子容器
真正麻烦的不是写法本身，而是 Safari 旧版对标准的“选择性执行”：它不报错、不警告，只是默默回退到流式布局。所以验证必须落到计算样式和真机 outline 上，而不是靠桌面模拟器或“看起来差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
