最稳写法是repeat(3, minmax(110px, 1fr))配合gap: 8px和grid-auto-rows: minmax(120px, auto)，确保iphone se等小屏下稳定三列、不塌行、图片不变形；禁用auto-fit，改用auto-fill保留空轨道以维持九宫格结构感。
移动端九宫格不是“必须填满9个格子”，而是“在小屏上稳定维持三列、不塌行、不换行、图片不变形”的视觉结构。直接写 grid-template-columns: repeat(3, 1fr) 在 iPhone SE（375px）上大概率失效——它会退成两列，甚至一列。
为什么 repeat(3, 1fr) 在小屏下会塌列
因为 1fr 没有最小宽度约束。375px 宽度减去两个 gap: 8px 后只剩约 359px，÷3 ≈ 119.7px。一旦图片带标题、字体放大、或加载未完成导致内容略宽，浏览器判定“放不下”，就自动回退列数。
- 这不是 Grid 不兼容，是轨道定义太松
-
minmax(33.33%, 1fr)无效：百分比在 Grid 轨道中行为不可控 - 容器加了
padding却没算进总宽，容易触发横向滚动 - 用
margin模拟间隙时，最后一行/列会多出一倍外边距
真正稳的写法：repeat(3, minmax(110px, 1fr))
这个值不是拍脑袋定的，而是从设备视口反推出来的安全下限：375px − 2×8px = 359px → ÷3 ≈ 119.7px → 取整 110px 留容错（应对字体缩放、边框、内边距等扰动）。
- 必须搭配
gap: 8px，别用margin；gap是网格原生属性，不参与盒模型计算 - 容器不要设
padding，改用margin: 0 12px+max-width: calc(100vw - 24px)控制左右安全区 - 子项加
aspect-ratio: 1 / 1预占正方形空间，防图片加载抖动；iOS ≤16.3 不支持时降级用padding-bottom: 100%+ 绝对定位 - 图片本身设
width: 100%; height: 100%; object-fit: cover;，不拉伸、不溢出、居中裁剪
子项少于9个时，怎么保持“九宫格感”
Grid 默认留空是正确行为，别塞空 <div></div>。真正要的是“轨道还在”，靠以下组合：
-
grid-template-columns: repeat(3, minmax(110px, 1fr))—— 固定三列语义 -
grid-auto-rows: minmax(120px, auto)—— 行高有底线，内容短也不塌 - 禁用
auto-fit：它会合并空轨道，破坏网格结构感；auto-fill才保留空轨道 - 如果想让单张图也独占一格（比如朋友圈首图），不用额外处理——Grid 按源顺序填入，第一项自然落在左上角
最易被忽略的点是：gap 和 padding 的叠加效应。很多人加了 gap: 8px 后又给容器加 padding: 8px，结果最外侧格子离屏幕边缘只有 0px，视觉严重不对称。记住，gap 不产生内外边距，它只管“格子之间”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
