结论是：grid-template-columns: 33.33% 33.33% 33.34% + grid-auto-rows: minmax(120px, auto) 最稳，因repeat(3, 1fr)在iPhone SE等小屏易因浮点误差、子项最小宽度不足或渲染抖动导致塌为两列，而显式百分比锁死三列逻辑，minmax保障行高弹性不截断。
直接说结论：不是图片本身不均匀，而是 Grid 列定义没锁死或行高没约束——grid-template-columns: 33.33% 33.33% 33.34% + grid-auto-rows: minmax(120px, auto) 是目前最稳的组合，比 repeat(3, 1fr) 更抗小屏、缩放、加载抖动。
为什么 repeat(3, 1fr) 在 iPhone SE 上会塌成两列
浏览器算 1fr 时，会先看子项最小内容宽度（比如未加载完的图片高度为 0、带标题的文字换行临界点），再均分。一旦某格实际占宽 > 容器宽 ÷ 3，它就判定“放不下三列”，自动降级为两列。
-
repeat(3, 1fr)没设最小约束，纯靠均分，抗干扰能力弱 - 字体放大 150%、
padding、边框、iOS subpixel 渲染，都会让三列总宽 ≠ 100% - 实测
grid-gap: 8px+repeat(3, 1fr)在 375px 屏上，列宽常为124.33px、124.33px、126.34px—— 累积误差直接导致第三列换行
grid-template-columns 写百分比还是 repeat()？
写显式百分比：grid-template-columns: 33.33% 33.33% 33.34%。这不是过时，是堵住浮点误差和小屏退化的真实翻车点。
- 所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）都支持，无需 polyfill
- 别用
repeat(3, 33.33%)：Grid 中百分比需基于容器计算，若容器有padding或border，极易溢出 -
gap必须用全称grid-gap，IE11 不认简写gap
图片高度不一致，怎么统一又不拉伸？
关键不是设固定 height，而是用 grid-auto-rows: minmax(120px, auto) 控制行高弹性。
立即学习“前端免费学习笔记（深入）”；
- 写死
grid-auto-rows: 120px会导致图片被截断或拉伸；minmax(120px, auto)才是平衡点：内容少留白，内容多延展，不影响其他格子 - 正方形首选
aspect-ratio: 1/1，但 iOS ≤16.3（即旧 Safari）不支持，必须降级：position: relative+padding-bottom: 100%+ 绝对定位图片 - 禁用
height: 120px类强制等高——它会截断长文本、无视系统字体缩放
1～9 张图如何保持三列结构不塌、不补空？
核心不是补空 <div>，而是靠 Grid 轨道定义“占位语义”：列数锁死，行高弹性。
- 用
grid-template-columns: 33.33% 33.33% 33.34%锁死三列逻辑，不管几张图都维持三列视觉结构 - 禁用
auto-fit类方案（如repeat(auto-fit, minmax(110px, 1fr)))）——图片未加载完时 DOM 高度为 0，Grid 误判尺寸，导致错行 - 容器别设
padding，改用margin: 0 12px控左右安全区，再配max-width: calc(100vw - 24px)防窄屏溢出
真正容易被忽略的是：九宫格不是响应式栅格，它的列数固定为 3。所有方案都要围绕这个前提做取舍——grid-template-columns 显式写死三列，比任何“自适应”写法都更可靠。
