微信小程序网格布局

效果图

实现

wxml

        <!-- 订单内容 -->
        <view class="father">
          <!-- 订单item -->
          <view class="childs" wx:for="{{List}}" wx:key="{{ index }}">



          </view>
        </view>

wxss

.father{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.childs{
  width: 170px;
  margin: 10px auto;
}