旧版Safari（iOS 15.4/Safari≤15.3）不解析grid-template-areas、row-gap、column-gap、auto-fit，整条声明被静默丢弃；需用Computed面板验证display是否为grid、grid-template-columns是否为空，改用grid-column/grid-row显式定位和gap合写，并补全轨道定义。
旧版 Safari（iOS 15.4 / Safari ≤15.3）对 CSS Grid 的关键语法存在静默丢弃行为，不是“渲染 Bug”，而是根本不解析——grid-template-areas、row-gap、column-gap、auto-fit 这些声明会被整条跳过，导致布局退化为流式，这不是你代码写错了，是浏览器压根没执行。
怎么确认 Safari 真的没解析 grid 声明？
别猜，用 Safari 自带开发者工具直接验证：
- 打开 Develop → Show Web Inspector → 选中网格容器 → Computed 面板搜索
display：若值为block或空白，说明display: grid被静默丢弃 - 再搜
grid-template-columns：若显示none或空值，基本锁定是旧内核不支持该语法 - 临时加
outline: 1px solid red到子项上：如果 outline 紧贴文字边缘而非按网格线对齐，证明 Grid 定位根本没启动
为什么 grid-template-areas 写了却没反应？
它在 Safari ≤15.3 中完全不支持字符串语法，写了等于白写。更麻烦的是，一旦声明无效，整个网格上下文可能失效，子项退回流式布局。
- 必须彻底移除
grid-template-areas，改用显式行列线定位：grid-column: 1 / -1（跨整行）、grid-row: 2（第 2 行） -
-1表示隐式最后一根线，所有支持 Grid 的旧内核都认；避免用span 2，旧 Safari 对span在 fallback 场景下行为不稳定 - 同步补全容器轨道定义：
grid-template-columns: 200px 1fr和grid-template-rows: 60px auto 40px，缺了这些，旧内核可能按auto撑开导致高度塌陷 - 媒体查询里不能只改
grid-template-areas，比如@media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; }—— Safari ≤14 根本不识别，必须重写整套grid-column/grid-row
gap 为什么在 Safari 里不生效？
旧版 Safari（≤iOS 15.3）不支持 row-gap 或 column-gap 单独声明，只认合写的 gap 属性。用了 row-gap: 12px 就会被静默忽略，子项紧贴错位。
- 统一用
gap: 12px（等价于row-gap: 12px; column-gap: 12px），不要拆写 - 若需不同值，用
gap: 12px 16px（row-gapcolumn-gap） - 注意：在
grid-auto-flow: column布局下，gap在 iOS 旧版 Safari 中依然无效，此时建议降级为display: flex+flex-wrap - 检查父容器是否设了
overflow: hidden或硬编码width：gap 推挤后总宽超限会被裁剪，看起来像 gap “消失”
动态加载图片时网格错位怎么修？
这不是 Grid 问题，是 Safari 对未完成加载的 WebP 图片返回 naturalWidth/naturalHeight 为 0，导致容器高度计算为 0，Grid 轨道塌缩，进而引发错位。
- 给图片容器设
aspect-ratio: 16/9（现代 Safari 支持），作为 fallback；旧版 Safari 可配合min-height或padding-top百分比占位 - 监听图片
load事件，加载完成后手动触发resize或更新容器类名，强制重排 - 避免依赖
img.naturalWidth做布局判断——Safari 下它不可靠；改用img.complete && img.naturalWidth > 0双重校验 - 最稳方案：预设固定宽高或 aspect-ratio，不让布局等待图片加载完成才启动
真正容易被忽略的点是：你以为在修“Bug”，其实是在和一个不声不响跳过整条 CSS 规则的引擎打交道。验证必须靠 Computed 面板看真实值，而不是样式面板里有没有那行字；修复必须放弃语法糖，回到显式、确定、可预测的定位方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
