uni-app中flex网格在小程序错位因微信小程序flex-wrap对view支持不全，需显式设width:100%、用flex:0 0 33.33%替代width百分比，并加min-width:0；grid布局小程序完全不支持；多端响应式推荐动态计算rpx列宽并预留2rpx容错。
uni-app里用flex做网格布局为什么在小程序端错位？
因为微信小程序的flex-wrap对view容器支持不完整，尤其在uni-app编译成小程序时，若父容器没设width或用了%单位但未限定上下文宽度，子项会塌缩或换行失效。
- 必须给网格容器（如
view）显式设置width: 100%，不能只靠flex: 1 - 避免在
flex-direction: row下对子项用width: 33.33%——小程序里calc()和小数百分比渲染有误差，改用flex: 0 0 33.33% - 安卓微信开发者工具中
flex-wrap: wrap偶尔不触发，加min-width: 0到子项可稳定换行
uni-app里grid布局能用吗？
不能直接用display: grid——H5端支持，但微信/支付宝/头条小程序完全不支持grid，uni-app也不会做降级转换。强行写只会让小程序白屏或布局乱掉。
- H5端可用
display: grid，但需配合@supports (display: grid)做渐进增强 - 多端统一方案只能回归
flex：用flex-direction: row+flex-wrap: wrap模拟行列 - 若需复杂网格（如跨行、间距控制），推荐封装一个
uni-grid组件，内部用flex+ 动态计算flex-basis
怎么让三列布局在不同屏幕宽度下自动变成两列或一列？
靠media query + flex组合最稳，但要注意uni-app的px单位在各端逻辑像素不一致，优先用rpx或vw。
- 用
@media (max-width: 768px)切两列，@media (max-width: 480px)切一列——但H5有效，小程序无效 - 真·多端生效的做法：用
uni.getSystemInfoSync().screenWidth动态算列数，再绑定class或style - 示例：
:style="{ 'flex-basis': columnWidth + 'rpx' }"，其中columnWidth根据屏幕宽动态赋值（如750rpx屏三列→250rpx，500rpx屏两列→250rpx）
用uni-app的uni-row/uni-col组件靠谱吗？
不推荐。官方uni-ui里的uni-row/uni-col本质还是flex实现，但封装层叠了额外padding、margin和box-sizing逻辑，在App端和小程序端表现不一致，调试成本高。
- 它默认加了
padding: 0 10rpx，导致实际内容宽度不可控 -
offset属性在小程序里经常失效，因transform未被正确透传 - 真正轻量可控的做法：自己写
.row { display: flex; flex-wrap: wrap; }+.col-4 { flex: 0 0 33.33%; }，然后按需加class
最麻烦的不是写法，而是rpx在不同设备DPR下换算精度丢失，比如iPhone 14 Pro Max的1rpx = 0.5px，但某些安卓机是1rpx ≈ 0.333px，所以列宽用rpx算出来差1px就可能触发换行——这点容易被忽略，得留出至少2rpx容错间隙。
