小程序宫格组件实现

直接上代码：

grid_com.js

/**
   * 组件的属性列表
   */
  properties: {
    showImgs: {
      type: Array,
      value: [
        "/images/mall_swiper_banner.jpg",
        "/images/mall_swiper_banner.jpg",
        "/images/mall_swiper_banner.jpg",
        "/images/mall_swiper_banner.jpg",
        "/images/mall_swiper_banner.jpg",
        "/images/mall_swiper_banner.jpg"
      ]
    }
  },

grid_com.wxml

<view class="grid-outer">
    <block wx:for="{{showImgs}}" wx:key="{{index}}">
      <view class="grid-container">
        <view class="grid-container-item" data-url="{{item}}" bindtap="showImgAction"></view>
      </view>
    </block>
  </view>

grid_com.wxss

.grid-outer {
  display: flex;
  flex-direction: row;
  /* 自动换行 */
  flex-wrap: wrap;
  width: 690rpx;
}

.grid-container {
  width: 230rpx;
  height: 210rpx;
  margin: 0 0 20rpx 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container-item {
  width: 210rpx;
  height: 210rpx;
  background: #f8f8f8;
}

组件使用：
.json

{
  "usingComponents": {
    "Grid_com": "/components/grid_com/grid_com"
  },
}

.wxml

      <Grid_com />

效果图：