Grid平均分布自动换行

前言：当我们在布局商品列表的时候，需要平均分布和自动换行功能，在此使用grid简单快捷布局实现该功能，这里以微信小程序为例。
wxml部分

<view class="container">
    <view wx:for="{{14}}">{{index}}</view>
</view>

wxss部分

.container{
    margin:0 20rpx;
    border:1rpx solid red;
    display: grid;
    //第一个属性：行与行间隔，第二个属性列与列间隔
    grid-gap:20rpx 20rpx;
    //内容整体平均分布
    justify-content: space-between;
    //单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
    grid-template-columns: repeat(auto-fill, 200rpx);

}
.container>view{
    width:200rpx;
    height:200rpx;
    border:1rpx solid red;
}

运行结果

如有帮助到您，请点个赞哦！！！