应写显式百分比：grid-template-columns: 33.33% 33.33% 33.34%，因repeat(3, 1fr)在小屏易退化为两列且受浮点误差、padding、缩放等影响；正方形用aspect-ratio: 1/1，iOS 16.4+及Android Chrome全支持。
CSS Grid 是目前构建九宫格图片布局最稳、最省事的方案，现代浏览器全覆盖，无需 polyfill 或降级 hack。
grid-template-columns 该写 repeat(3, 1fr) 还是显式百分比？
别用 repeat(3, 1fr) —— 它在小屏（如 iPhone SE 的 375px）下容易退化为两列，因为 1fr 不设最小宽度，浏览器判定单列内容放不下就自动收缩列数。真实场景中还常因字体缩放、边框、padding 导致计算偏差。
更稳妥的是显式写三列百分比：grid-template-columns: 33.33% 33.33% 33.34%。这样能堵住浮点误差累积，语义清晰，且所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）都支持。
注意：grid-gap 要写全称（别用 gap），IE11 不认简写；移动端建议固定值如 8px，避免缩放时间隙忽大忽小。
立即学习“前端免费学习笔记（深入）”；
图片正方形怎么保？aspect-ratio 是首选但得兜底
aspect-ratio: 1/1 是最简洁的正方形控制方式，iOS 16.4+ 支持率 ≥95%，Android Chrome 全系支持。但它在旧 Safari（
必须加降级：
- 给图片容器设
width: 100%; height: 0; padding-bottom: 100%+position: relative - 图片本身用
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover - 禁用
height: 120px类强制等高——会截断文字、破坏系统字体缩放
1～9 张图如何保持三列结构不塌？
关键不是补空 <div>，而是靠 Grid 轨道定义“占位语义”：
- 用
grid-template-columns: 33.33% 33.33% 33.34%锁死三列逻辑 - 用
grid-auto-rows: minmax(120px, auto)控制行高：内容少留白，内容多延展，不拉扯其他格子 - 禁用
auto-fit（如grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)))）——它在图片未加载完时会误判子项数量，导致错行 - 容器别加
padding，改用margin: 0 12px控制左右安全区，再配max-width: calc(100vw - 24px)防窄屏溢出
点击体验差？这些细节决定是否“像朋友圈”
朋友圈九宫格不是只看排版，用户要能顺畅点开每张图。常见卡点：
- 图片加载前高度为 0，加载后突然撑开 → 视觉“楼梯格”抖动：靠
aspect-ratio或padding-bottom预占位解决 - 小屏点击区域太小 → 加
min-height: 44px（iOS 最小可点击区域标准） - 手指滑动时触发误点击 → 加
touch-action: manipulation禁用非必要手势 - 末行格子左对齐、间隙错位 → 别用 margin 模拟 gap，Grid 自带
gap才真正约束所有项
复杂点不在怎么画格子，而在图片加载节奏、触摸反馈、缩放兼容这三处——它们不报错，但一上线就让用户觉得“不够原生”。
