Safari ≤15.3 不解析 grid-template-areas、row-gap、auto-fit 等声明，整条 display: grid 规则被静默丢弃而退化为 block；验证需查 Computed 面板中 display 是否为 grid、grid-template-columns 是否为空。
不是 Tailwind 写错了，是 Safari ≤15.3（尤其是 iOS 15.4 前）压根没解析 grid-template-areas、row-gap、auto-fit 这些声明，整条规则被静默丢弃，布局退化为 display: block —— 你看到的“错位”，其实是 Grid 根本没启动。
为什么 Safari 开发者工具里 display: grid 显示为 block
这不是代码写错，是 Safari 内核根本没加载 Grid 解析器。常见触发点：
-
grid-template-areas—— Safari ≤15.3 完全不识别，整条display: grid规则被跳过，回退成display: block -
row-gap或column-gap—— 在 Safari ≤15.3 中无效，但不会报错，只是间隙消失，子项紧贴错位 - 父容器只写了
display: grid却没定义grid-template-columns—— Safari 可能按auto撑开轨道，导致列宽异常或高度塌陷
验证方式：打开 Safari 开发者工具 → Computed 面板 → 搜 display，若值不是 grid；再搜 grid-template-columns，若显示 none 或空字符串，基本锁定是旧内核问题。
为什么 Tailwind 的 grid-cols-* 和 grid-areas 同时用就失效
Tailwind 生成的 grid-cols-12 和 grid-template-areas 类会合并进同一样式块。只要其中含 Safari 不支持的 grid-template-areas，整条规则（包括前面的 display: grid 和 grid-cols-12）都会被跳过。
立即学习“前端免费学习笔记（深入）”；
- 别在同一个 CSS 块里混用
grid-template-areas和grid-column/grid-row—— Safari 会直接忽略整条声明 - 响应式写法如
md:grid-template-areas:"sidebar main"在 Safari ≤14 中同样无效，不能靠媒体查询“救活”字符串语法 - 区域名含短横线（如
user-stats）会匹配失败；必须严格一致：大小写、空格、连字符全算，推荐用下划线user_stats
最稳解法：删掉所有 grid-template-areas 相关类，改用 col-span-* + row-span-* 或显式 grid-column/grid-row 定位。
为什么 gap 类（如 gap-4）在 Safari 里没间距
Tailwind 的 gap-4 编译为 gap: 1rem，这在 Safari ≤15.3 是有效的；但如果你额外写了 row-gap-4 或 column-gap-4，它们会被 Safari 静默忽略，且可能干扰 gap 的解析顺序。
- Safari ≤15.3 只认合写的
gap，不认分开的row-gap/column-gap - 确保
gap声明出现在所有row-gap/column-gap之前（Tailwind 默认满足，但自定义 CSS 可能打乱） - 旧版 Safari（≤10.1）甚至不认
gap，需双写：-webkit-grid-gap: 1rem+gap: 1rem，且前缀版必须在前 - 若用
grid-cols-[200px_1fr]这类函数式写法，确认其中没混入minmax()或fr—— Safari ≤10.1 对这些单位解析不稳定
如何验证和调试真机表现
桌面模拟器经常骗人。Safari 的“响应式设计模式”不模拟旧内核行为，Computed 面板也可能缓存错误状态。
- 真机调试务必用
eruda：CDN 引入后右下角唤出，它的 Grid 面板能实时显示轨道编号和元素实际占用区域，比桌面准得多 - 临时加
outline: 1px solid red到子项上 —— 如果 outline 紧贴文字边缘而非对齐网格线，证明 Grid 没生效 - 检查
browserslist是否包含ios_saf >= 11.3或safari >= 10；否则 Autoprefixer 不会补-webkit-grid等关键前缀 - 不要依赖
@supports (display: grid)单独检测 —— Safari 10.1 能解析该语句却无法执行后续属性，结果是“半生效”错乱
最易被忽略的一点：即使你用了 grid-cols-12，若容器没设 grid-template-rows 或显式行列定位，旧 Safari 仍可能按 auto 计算轨道，导致高度塌陷或列宽漂移 —— 显式定义比依赖隐式行为可靠得多。
