uniapp使用css的grid尽量两列列表的显示
先看列表的效果图,是一个2列内容显示的滚动列表
可以看到一行有2列,然后2列中边框的距离是30rpx,中间间距也是30rpx,所以可以通过设置css样式如下:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, calc((100vw - 90rpx) / 2));
padding: 30rpx 30rpx 0 30rpx;
justify-content: space-between;
}
可以看到(100vw-90rpx)/2
就是每个卡片占有的宽度了,这样grid会自动分配每个card的宽度设置样式,很方便,不用字节写flex布局之类的来每个设置宽度了