uni-app中column-count无效因小程序不支持该CSS属性，跨端应使用Flex或Grid模拟分栏；Flex方案需数据分组后纵向堆叠再横向排列，Grid需兼容基础库版本并降级处理。
uni-app里用column-count做分栏为什么没效果？
因为默认情况下，view容器不支持column-count——它只对块级、非替换元素生效，而uni-app的view在H5端被编译为div，但小程序端本质是自定义组件，不识别CSS多列属性。
真正能跨端生效的方案，是用Flex或Grid模拟分栏，而非依赖原生CSS多列。
- 小程序平台（微信/支付宝等）完全忽略
column-count，连H5调试时看到效果，真机预览就消失 - 即使H5端生效，
column-break-inside: avoid等控制断行的属性兼容性差，容易把一个view切成两半 - 内容高度不均时，纯CSS多列无法自动平衡各列高度，视觉上很突兀
uni-app中用flex实现三栏自适应布局怎么做？
核心思路：把数据按列数分组，每组渲染一列，靠flex-direction: column让列内内容自然堆叠，再用外层display: flex横向排列各列。
这样既规避了CSS多列的兼容问题，又能让每列高度独立撑开，避免内容被截断或错位。
- 假设有12条数据，要分3栏，就用
Array.from({ length: 3 }, (_, i) => list.filter((_, idx) => idx % 3 === i))分组 - 外层
view加style="display: flex; width: 100%"，子列view设flex: 1并加style="display: flex; flex-direction: column" - 注意：不能直接对原始列表用
flex-wrap: wrap+width: 33.33%，那样在iOS微信小程序里会因计算精度丢失导致最后一列换行
<view class="columns">
<view v-for="(col, i) in columns" :key="i" class="column">
<view v-for="item in col" :key="item.id" class="item">{{ item.text }}</view>
</view>
</view>
uni-app中用grid实现响应式多列要注意什么？
Grid确实更接近语义化分栏，但uni-app各端对grid-template-columns: repeat(auto-fill, minmax(…)))的支持不一致：H5没问题，微信小程序基础库≥2.25.0才开始支持repeat()函数，低于此版本会直接失效。
- 必须加运行时降级逻辑：用
uni.getSystemInfoSync().SDKVersion判断基础库版本，低版本切回Flex分组方案 -
gap在旧版小程序里不支持，得用margin模拟，且需注意last-child在小程序里不可用，要用:nth-last-child(1)替代 - 不要用
grid-auto-flow: column，它会让内容按列优先填充，但uni-app的view在小程序中不触发正确的重排，容易乱序
分栏后图片和文字高度不一致，怎么让每列底部对齐？
这不是样式能一键解决的问题。Flex/Grid本身不会拉伸列高来对齐底部——它们只是布局工具，不是“等高容器”。强行用align-items: stretch对列内内容无效，因为子项高度由内容决定。
- 如果业务允许，最稳的方式是给每列固定高度（如
min-height: 600rpx），再配合justify-content: space-between把首尾元素推到上下边缘 - 若必须动态等高，得用
uni.createSelectorQuery()手动测量各列高度，取最大值再统一设置，但会触发两次渲染，有性能抖动 - 别用
height: 100%试图撑满，父容器没显式高度时，百分比高度在小程序里计算结果常为0
分栏的本质是数据切分+容器排列，不是CSS魔法。哪一端兼容性弱、哪类内容易破局，得提前在数据结构层想清楚。
