uni-app九宫格应使用flex+wrap布局而非CSS Grid，子项设flex: 0 0 33.33%，图片用mode="aspectFill"并配合服务端裁剪，不足9张时动态渲染真实项数，避免空占位；需设固定宽高比、CDN带尺寸参数、真机低网速下测试。
uni-app 里用 flex 布局实现九宫格，别碰 grid
uni-app 的 css grid 在微信小程序端不支持（基础库低于 2.17.0 时直接失效），H5 和 App 端虽可用，但跨端一致性差。真正稳的方案是 flex + wrap，配合固定宽高比控制图片缩放。
常见错误是直接套用 PC 端的 display: grid 写法，结果小程序里图片堆成一列或溢出容器。
-
view容器设display: flex; flex-wrap: wrap;，子项用flex: 0 0 33.33%（三列） - 每张图用
image组件，mode="aspectFill"或"widthFix"，别用"scaleToFill"（会拉伸变形） - 图片外层加
view包裹并设固定宽高（如width: 33.33%; padding-bottom: 33.33%;），用伪元素或image自身宽高控制比例
image 的 mode 怎么选才不糊、不变形
九宫格里图片尺寸差异大，mode 选错会导致裁剪异常或留白难看。不是所有 mode 都适合缩略图场景。
-
"aspectFill"：最常用，等比缩放后居中裁剪，保证填满且无黑边，但可能切掉关键内容 -
"widthFix"：宽度铺满，高度自适应，适合横图，但竖图会显得太小 -
"aspectFit"：等比缩放至完全显示，四周可能有空白——九宫格里会破坏网格对齐，慎用 - 避免
"scaleToFill"：强制拉伸，人像/文字类图会明显失真
实操建议：统一用 "aspectFill"，再通过服务端返回带封面裁剪逻辑的缩略图 URL，比前端硬裁更可控。
图片数量不足 9 张时，怎么让最后一行左对齐不撑满
默认 flex-wrap 下，剩余项仍占满整行宽度，视觉上像“缺图但留空位”，微博实际做法是让它们左对齐、不占满。
- 给容器加
justify-content: flex-start;（默认就是，一般不用显式写） - 关键是子项不能设
flex-basis: 33.33%后还强行换行——要靠 JS 控制渲染数量，或用v-for+:key动态生成真实项数 - 不要用空
view占位：小程序里空节点仍参与 flex 计算，会导致错位 - 如果必须补足 9 个，用
v-for="(item, i) in [...pics, ...Array(9 - pics.length).fill(null)]"，然后在image外层加v-if="item"
小程序真机调试时图片加载慢、闪烁、重绘严重
这不是样式问题，是 uni-app 生命周期和图片加载机制叠加导致的：页面渲染快于图片加载完成，image 尺寸反复变化触发 layout，尤其在列表滚动时。
- 给
image设固定宽高（如width: 100%; height: 100%;），父容器用padding-bottom控制比例，避免图片加载后重排 - 用
@load事件做 loading 状态控制，而不是依赖v-show切换显隐 - 避免在
scroll-view里直接放大量image，改用uni-list+uni-load-more分页，或加lazy-load属性（仅微信基础库 ≥ 2.12.0 支持） - CDN 图片地址务必带尺寸参数（如
?x-oss-process=image/resize,w_300），减少客户端缩放计算
最易被忽略的是：开发时用本地图片看不出问题，一上真机、走 CDN、加网络延迟，layout 抖动立刻暴露——得在真机 + 低网速下测三遍才算过关。
