当前位置：首页 > uni-app

uniapp grid

2026-01-14 18:11:36uni-app

uniapp grid 布局实现方法

在 uniapp 中实现 grid 布局可以通过多种方式完成，包括使用内置组件、CSS Grid 或第三方插件。以下是几种常见的实现方法：

使用 uni-grid 组件

uniapp 提供了 uni-grid 和 uni-grid-item 组件，可以快速创建网格布局：

<uni-grid :column="3">
  <uni-grid-item>
    <text>Item 1</text>
  </uni-grid-item>
  <uni-grid-item>
    <text>Item 2</text>
  </uni-grid-item>
  <uni-grid-item>
    <text>Item 3</text>
  </uni-grid-item>
</uni-grid>

使用 CSS Grid 布局

在 view 元素上直接应用 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>

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

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

使用 flex 布局模拟 grid

对于不支持 CSS Grid 的老版本小程序，可以使用 flex 布局：

<view class="flex-grid">
  <view class="flex-row">
    <view class="flex-item">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item">3</view>
  </view>
</view>

.flex-grid {
  width: 100%;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 0 30%;
  margin: 5px;
}

实现响应式 grid 布局

通过媒体查询实现不同屏幕尺寸下的网格变化：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

使用 uView UI 的 grid 组件

如果项目使用了 uView UI 框架，可以使用其 grid 组件：

<u-grid :col="4">
  <u-grid-item v-for="(item, index) in 8" :key="index">
    <u-icon name="photo" :size="46"></u-icon>
    <text class="grid-text">功能</text>
  </u-grid-item>
</u-grid>