el-row el-col不能实现的布局:一个多行多列并且移动端适配,每行用分隔线隔开的布局 采用display:grid;grid-template-columns: repeat(3,1fr);实现
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiNx8FesU2cfdGLwczX0xiRGZkRGZ0Xy9GbvNGLwIzXlpXazxCaWhkY5ZTS2ATYxVTQClGVF5UMR9Fd4VGdsATNfd3bkFGazxycykFaKdkYzZUbapXNXlleSdVY2pESa9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL2IWZhNGNmZWO3EWN0AjNiVmZlRDO5UzMzgTM4MWOxgzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
解决办法:父元素用display:grid布局
.card-grids{
font-size: 35rpx;
font-weight: 500;
background: #fff;
display: grid;
margin-top: 10rpx;
grid-template-columns: repeat(3,1fr);
}
.card-grids-col{
padding:19rpx 0 19rpx 0rpx;
border-bottom: 1px solid rgb(238, 238, 238);
background: #fff;
text-align: center;
display: block;
clear: both;
}