uniapp grid

uniapp grid 布局实现方法

uniapp 中实现网格布局可以通过以下几种方式：

flex 布局

使用 flex 弹性布局是最常见的方式，通过设置 display: flex 和 flex-wrap: wrap 实现网格效果。

<view class="grid-container">
  <view class="grid-item" v-for="(item, index) in list" :key="index">
    {{item}}
  </view>
</view>

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 33.33%;
  box-sizing: border-box;
  padding: 10px;
}

uni-grid 组件

uniapp 提供了专门的 uni-grid 组件用于实现九宫格布局。

<uni-grid :column="3">
  <uni-grid-item v-for="(item, index) in list" :key="index">
    <text>{{item}}</text>
  </uni-grid-item>
</uni-grid>

CSS Grid 布局

现代浏览器支持 CSS Grid 布局，可以实现更灵活的网格。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

网格布局的常见配置

列数控制

通过修改 CSS 或组件属性控制列数：

/* 4列布局 */
.grid-item {
  width: 25%;
}

<!-- 使用 uni-grid 组件 -->
<uni-grid :column="4">...</uni-grid>

间距设置

网格间距可以通过多种方式实现：

/* 使用 gap 属性 */
.grid-container {
  gap: 10px;
}

/* 或使用 margin/padding */
.grid-item {
  margin: 5px;
}

响应式布局

通过媒体查询实现响应式网格：

.grid-item {
  width: 50%;
}

@media (min-width: 768px) {
  .grid-item {
    width: 25%;
  }
}

注意事项

1. 在 uni-grid 组件中，图标和文字需要单独设置样式
2. 网格布局需要考虑不同设备的屏幕尺寸
3. 大量数据渲染时建议使用虚拟列表优化性能
4. 微信小程序中 CSS Grid 布局支持度有限，建议使用 flex 布局

以上方法可以根据具体需求选择使用，flex 布局兼容性最好，CSS Grid 布局最灵活，uni-grid 组件最便捷。