uniapp grid

uniapp grid 布局实现方法

在 uniapp 中实现网格布局（grid）可以通过多种方式完成，以下介绍几种常见的方法：

使用 flex 布局模拟网格

通过 flex 布局结合百分比宽度可以模拟网格效果，适合简单的等分布局场景。

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

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

.grid-item {
  width: 25%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}

使用 CSS Grid 布局

在支持 CSS Grid 的平台上（如 H5），可以直接使用原生 CSS Grid 属性。

<view class="grid-container">
  <view class="grid-item">1</view>
  <view class="grid-item">2</view>
  <view class="grid-item">3</view>
  <view class="grid-item">4</view>
</view>

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

.grid-item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}

使用 uni-grid 组件

uniapp 提供了专门的 uni-grid 组件，可以快速实现九宫格等布局。

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

响应式网格布局

结合媒体查询可以实现响应式网格布局，适应不同屏幕尺寸。

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

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

注意事项

• 在小程序环境中，CSS Grid 支持度有限，建议使用 flex 布局或 uni-grid 组件
• uni-grid 组件需要引入对应组件库，可通过 npm 安装或直接使用 HBuilderX 创建的项目模板
• 网格间距可以使用 gap 属性（H5）或通过 margin/padding 实现（小程序）
• 复杂网格布局可能需要结合计算属性动态设置样式