最稳写法是固定三列+gap+minmax(110px,1fr)，禁用auto-fit防小屏换行；需加min-height:44px和touch-action:manipulation保点击体验，并用@media或@supports降级兼容旧ios。
直接用 display: grid 实现移动端自适应九宫格，最稳的写法是：固定三列 + gap + minmax() 配合媒体查询降级。别指望 auto-fit 自动适配所有小屏，它在 375px 宽度下容易挤成两列甚至一列，破坏“九宫格”语义。
怎么让九宫格在 iPhone 上稳定显示三列
核心是放弃“完全自适应列数”，改为主动控制最小列宽。现代移动端视口宽度集中在 375px（iPhone SE/13 mini）到 414px（iPhone 12/14 Pro），此时三列每列需至少 ≈110px 才不换行。
-
grid-template-columns: repeat(3, minmax(110px, 1fr))—— 每列最小 110px，超出部分均分，比1fr 1fr 1fr更抗压缩 - 必须加
gap: 8px（不能用margin），否则 iOS Safari 会因子项margin-bottom累计导致最后一行缺缝隙 - 容器设
width: 100%且box-sizing: border-box，避免 padding 撑破父容器 - 若内容为图标或按钮，每个子项加
min-height: 44px和touch-action: manipulation，防点击延迟
为什么 auto-fit + minmax() 在小屏容易翻车
repeat(auto-fit, minmax(120px, 1fr)) 看似聪明，但实际在 375px 宽度下：3 × 120px = 360px，剩余 15px 分给 gap（比如 8px × 2 = 16px），总需求 376px > 可用宽度 → 浏览器被迫回退为 2 列。这不是 bug，是计算逻辑使然。
- 错误写法：
minmax(1fr, 1fr)—— 这等于固定单列宽度，失去弹性 - 更糟的是：
minmax(33.33%, 1fr)—— 百分比在 Grid 中不参与 fr 分配，行为不可控 - 真要保三列，就别用
auto-fit，老实用媒体查询覆盖：@media (max-width: 414px) { grid-template-columns: repeat(3, 1fr); }
图片九宫格如何避免高度参差不齐
纯 repeat(3, 1fr) 只管列，行高由图片撑开，结果有的格子高、有的矮，视觉失衡。
- 加
grid-auto-rows: minmax(120px, auto)—— 所有自动创建的行最小 120px，内容短的留白，长的自然延展 - 图片容器加
aspect-ratio: 1/1（支持率 ≥95%，iOS 16.4+），预占位防加载闪动 - 图片本身设
width: 100%; height: 100%; object-fit: cover;，裁剪居中，不拉伸 - 别用
height: 120px强制等高 —— 文字多的格子会截断，且无法响应字体缩放
兼容 iOS 11.1 及更旧版本的降级方案
iOS Safari 在 11.2+ 才支持 gap，低于此版本会完全忽略，所有格子紧贴排列。不能只靠 @supports 包裹，得提供可落地的 fallback。
- 先写现代语法：
gap: 8px - 再用
@supports not (gap: 8px)块内重写：margin-right: 8px; margin-bottom: 8px; - 清除每行末尾右 margin：
.grid-item:nth-child(3n) { margin-right: 0; } - 清除最后一行 bottom margin：
.grid-item:nth-last-child(-n+3) { margin-bottom: 0; }—— 这个 selector 容易漏，务必真机调试验证
真正难的不是写出三行 Grid 代码，而是想清楚：你要的是“刚好九个格子排三行”，还是“不管几个格子都尽量填满三列”。前者必须控制列数稳定性，后者才适合 auto-fit；而绝大多数移动端入口场景，属于前者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
