uniapp宫格间距

调整 uniapp 宫格间距的方法

在 uniapp 中调整宫格（通常指 uni-grid 或类似布局组件）的间距，可以通过以下几种方式实现：

修改组件样式

通过 CSS 直接控制宫格间距，适用于自定义布局场景：

.uni-grid {
  /* 调整宫格整体外边距 */
  margin: 10px;
}

.uni-grid-item {
  /* 调整每个宫格项的内边距 */
  padding: 8px;
  /* 调整宫格项之间的间距 */
  margin: 5px;
}

使用 flex 布局

若宫格采用 flex 布局，可通过 gap 属性快速设置间距：

.uni-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 同时设置行间距和列间距 */
}

动态计算宽度

对于等宽宫格，可通过计算方式控制间距（以 3 列为例）：

<view class="grid-container">
  <view 
    v-for="(item, index) in list" 
    :key="index"
    class="grid-item"
    :style="{ width: `calc(33.33% - ${spacing}px)` }"
  >
    <!-- 内容 -->
  </view>
</view>

data() {
  return {
    spacing: 10 // 间距值
  }
}

使用官方组件参数

若使用 uni-grid 官方组件，可查看文档是否有内置间距参数：

<uni-grid :column="3" :spacing="20">
  <!-- 宫格内容 -->
</uni-grid>

注意事项

• 实际效果需考虑父容器宽度和宫格项数量
• 部分小程序平台对 gap 属性支持有限，建议测试兼容性
• 响应式场景建议使用 rpx 单位替代 px