uniapp宫格间距

调整宫格间距的方法

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

修改组件属性 若使用官方<uni-grid>组件，直接通过gutter属性设置间距（单位px）：

<uni-grid :gutter="20"></uni-grid>

自定义CSS样式 通过外层容器或子项样式控制间距：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 同时控制行间距和列间距 */
}
.grid-item {
  width: calc((100% - 32px) / 3); /* 示例：3列布局，考虑总间隙 */
}

使用margin/padding 为宫格子元素添加边距：

.grid-item {
  margin: 8px;
  /* 或 */
  padding: 8px;
}

注意事项

• gap属性需注意浏览器兼容性（H5端支持，部分小程序需兼容处理）
• 百分比宽度计算时需减去总间隙值
• 部分小程序平台可能需使用margin替代gap

响应式间距方案

通过SCSS变量实现不同屏幕适配：

$grid-gutter: 10px;
@media (min-width: 768px) {
  $grid-gutter: 20px;
}
.grid-item {
  margin: $grid-gutter/2;
}

使用uni-ui的扩展方案

若使用uni-ui的Grid组件，可通过插槽自定义样式：

<uni-grid :column="3" :border="false">
  <view class="custom-item" v-for="item in 6" :key="item"></view>
</uni-grid>
<style>
.custom-item {
  margin: 10rpx;
  background: #f5f5f5;
}
</style>