uni-app九宫格应优先用flex布局而非grid，因小程序端grid兼容性差；核心是flex-wrap:wrap+width:33.333%+box-sizing:border-box；需补空项保证数据长度为3的倍数，并注意点击热区、图标缩放、h5延迟等细节。
uni-app 里实现九宫格布局，不需要专门找“宫格组件”，用 flex + view 就够了——真正卡住开发的不是写法，而是数据结构错位、padding 和 border 破坏等分、以及在 H5 和小程序中 calc() 兼容性不一致这三件事。
为什么不能直接用 grid？
uni-app 编译到微信小程序时，display: grid 不被支持（基础库 2.17.0+ 才开始有限支持，且 grid-template-columns: repeat(3, 1fr) 在某些安卓机上仍会塌陷）；H5 端虽支持，但跨端一致性差。所以生产环境优先选 flex 布局。
-
flex-wrap: wrap是核心，别漏掉 - 每个格子必须设固定宽度（如
width: 33.333%），不能只靠flex: 1—— 否则在 iOS 微信里容易错行 - 避免用
margin隔开格子，改用padding包裹内容，否则总宽度超 100% 导致换行异常
uni-app 中九宫格的最小可行代码
下面这段代码在微信小程序、App、H5 三端都稳定：
<template><view class="grid"><view v-for="(item, i) in list" :key="i" class="grid-item"><image :src="item.icon" class="grid-icon"></image><text class="grid-text">{{ item.text }}</text></view></view></template><style>
.grid {
display: flex;
flex-wrap: wrap;
padding: 0 10rpx;
}
.grid-item {
width: 33.333%;
box-sizing: border-box;
padding: 20rpx 10rpx;
text-align: center;
}
.grid-icon {
width: 64rpx;
height: 64rpx;
margin: 0 auto 10rpx;
}
.grid-text {
font-size: 24rpx;
color: #333;
}
</style>
注意：box-sizing: border-box 必须加，否则 padding 会让实际宽度超 33.333%；rpx 单位在小程序和 H5 表现一致，但 App 端需确认是否启用 rpx 支持（manifest.json 中 app-plus > usingComponents 不影响此部分）。
数据格式不对会导致“最后一行只有 1 个或 2 个”
常见错误是后端返回的 list 长度不是 3 的倍数，前端没补空项，导致最后一行缺格子、样式错位。
- 补空逻辑建议写在
computed里，而不是mounted中修改原始数据 - 补的是空对象（
{ icon: '', text: '' }），不是null或undefined，否则v-for渲染会报错 - 如果不想显示空格子，就用
v-if="item.icon"控制显隐，但要同步调整width为calc(100% / 3)并确保父容器flex-wrap正常
点击区域小、图标模糊、文字截断怎么调？
九宫格交互体验差，往往不是布局问题，而是细节没对齐：
-
image加mode="aspectFit"，否则图标拉伸变形；若用 svg，优先转 base64 内联，避免小程序路径解析失败 - 文字用
text-overflow: ellipsis要配合white-space: nowrap和固定高度，但 uni-app 的text组件不支持line-clamp，只能单行截断 - 点击热区至少保证
80rpx × 80rpx，iOS 对小于 44pt 的点击区域识别率低，可在.grid-item上加min-height: 80rpx
最易被忽略的是：H5 端点击有 300ms 延迟，如果没引入 fastclick 或开启 touch-action: manipulation，用户会觉得“点不动”。这个坑不在布局里，但在同一页面里，它会让整个九宫格显得很迟钝。
