uniapp实现宫格布局

<template>
  <view class="Grid">
    <view
      class="Grid-Item"
      v-for="item in List"
      :key="item.id"
    >
      <view class="GSimg">
        <image
          class="Image"
          :src="item.url"
        ></image>
      </view>
      <view class="GStitle">{{ item.title }}</view>
    </view>
  </view>

</template>

<script>
export default {
  data () {
    return {
      List: [
        { id: 1, url: '/static/img/badge.png', title: '九宫格布局1' },
        { id: 2, url: '/static/img/badge.png', title: '九宫格布局2' },
        { id: 3, url: '/static/img/badge.png', title: '九宫格布局3' },
        { id: 4, url: '/static/img/badge.png', title: '九宫格布局4' },
        { id: 5, url: '/static/img/badge.png', title: '九宫格布局5' },
        { id: 6, url: '/static/img/badge.png', title: '九宫格布局6' },
        { id: 7, url: '/static/img/badge.png', title: '九宫格布局7' },
        { id: 8, url: '/static/img/badge.png', title: '九宫格布局8' },
        { id: 9, url: '/static/img/badge.png', title: '九宫格布局9' },
        { id: 10, url: '/static/img/badge.png', title: '九宫格布局10' },
        { id: 11, url: '/static/img/badge.png', title: '九宫格布局11' },
      ]
    }
  },

  mounted () {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"]
    })
  },
  methods: {

  }
}
</script>

<style lang='scss'>
page {
  background: #2d2d2d;
  min-height: 100vh;
}
.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  padding: 40rpx;
  column-gap: calc(25% / 2);
  row-gap: 20rpx;
  box-sizing: border-box;
  .Grid-Item {
    width: 25%;
    height: 213rpx;
    text-align: center;
    border: 1rpx solid #ccc;
    box-sizing: border-box;
    background: #303039;
    .GSimg {
      width: 100%;
      height: 96rpx;
      margin-top: 42rpx;
      text-align: center;
      .Image {
        width: 96rpx;
        height: 96rpx;
      }
    }
    .GStitle {
      width: 100%;
      height: 34rpx;
      line-height: 34rpx;
      color: #06121e;
      font-size: 24rpx;
      margin-top: 20rpx;
      color: #fff;
    }
  }
}
</style>