使用css僞類before／after實現 正方形三宮格、正方形六宮格、正方形九宮格

結構圖解析：

後記

<view class="test-box">
  <view class="test-item" v-for="item in 9" :key="item">
    <view class="test-content">
      12321
    </view>
  </view>
</view>



.test-box{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    .test-item{
      flex:0 0 33.33%;
      position: relative;
      &::before{
        content: ' ';
        display:block;
        padding-bottom:100%;
      }
      &:after{
        content: ' ';
        transform-origin: center;
        box-sizing: border-box;
        position: absolute;
        top:-50%;
        left:-50%;
        right:-50%;
        bottom:-50%;
        border-color: #c8c7cc;
        border-style: solid;
        border-width: 1px;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
        border-top-width: 0;
        border-left-width: 0;
      }
    }
    .test-content{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
}