最稳解法是grid-template-columns: 33.33% 33.33% 33.34%配合grid-auto-rows: minmax(120px, auto)，可杜绝小屏退列、浮点误差、加载抖动及缩放失真，再加min-height: 44px和touch-action: manipulation保障点击体验。
grid-template-columns: 33.33% 33.33% 33.34% 是目前最稳的写法，不是“不够现代”，而是它能堵住浮点误差、缩放抖动、小屏退化这些真实翻车点。硬套 repeat(3, 1fr) 在 iPhone SE（375px 宽）或系统字体放大 150% 时，极大概率变成两列——这不是 bug，是浏览器按内容实际占用宽度做的合理回退。
为什么 repeat(3, 1fr) 在小屏会塌成两列
浏览器计算 1fr 时，会先看子项最小内容宽度（比如图片原始宽、文字换行临界点），再结合容器总宽做分配。一旦某张图带标题、或加载未完成、或 object-fit 触发重排，单格实际占用宽度就可能 > 容器宽 ÷ 3 → 浏览器判定“放不下三列”，自动降为两列。
-
repeat(3, 1fr)没设最小约束，纯靠均分，抗干扰能力弱 - 字体缩放、
padding、边框、甚至 iOS 的渲染 subpixel 处理，都会让三列总宽 ≠ 100%，触发回退 - 实测中，
grid-gap: 8px+repeat(3, 1fr)在 375px 屏上，列宽常为 124.33px、124.33px、126.34px —— 累积误差直接导致第三列换行
aspect-ratio: 1/1 要配降级，否则旧 Safari 图片拉伸
aspect-ratio: 1/1 是正方形最简解，但它在 Safari ≤16.3（即 iOS 16.3 及更早）完全不生效。此时图片会按原始宽高比撑开，破坏九宫格整齐感。
- 必须加降级：给图片容器设
position: relative+padding-bottom: 100%，再让图片绝对定位填满 - 别用
height: 120px这类固定高——它会截断长文本、无视用户系统字体缩放 - 移动端慎用
vh单位做高度，Safari 滚动时视口高度会动态变化，导致闪跳
1～9 张图怎么保持三列不塌、不拉伸
关键不是补空 <div>，而是用 Grid 轨道定义“占位语义”：列数锁死，行高弹性。
立即学习“前端免费学习笔记（深入）”；
- 列用
grid-template-columns: 33.33% 33.33% 33.34%，彻底杜绝列数浮动 - 行用
grid-auto-rows: minmax(120px, auto)：内容少时留白，内容多时自适应延展，不影响其他格子 - 禁用
auto-fit类方案（如repeat(auto-fit, minmax(110px, 1fr)))）——图片未加载完时，DOM 高度为 0，Grid 误判子项尺寸，导致错行 - 容器本身别设
padding，改用margin: 0 12px控左右安全区，再配max-width: calc(100vw - 24px)防窄屏溢出
点击区域小、加载抖动、误触滑动怎么修
朋友圈级体验不是排版对齐就行，得过手指这一关。
- 图片加载前高度为 0 → 视觉“楼梯格”抖动：靠
aspect-ratio或padding-bottom预占位，别等 onload 再 setStyle - 小屏点击太难：每个格子加
min-height: 44px（iOS 最小可点击区域标准），哪怕内容只有一张图标 - 手指滑动时误点：加
touch-action: manipulation，禁用非必要手势识别，尤其在overflow: scroll容器里 -
grid-gap必须写全称，别用gap—— IE11 不认简写，而部分企业内网仍跑着 IE11
真正卡住九宫格落地的，从来不是“怎么写三列”，而是缩放、加载、点击、兼容这四个现实断点。写死百分比看着土，但它把变量全收进可控范围；aspect-ratio 很新，但没降级就是裸奔；Grid 很强，但没想清 auto-rows 和 auto-fit 的边界，照样翻车。
