Grid 宫格常用布局的实现

width: 100%;  
display: grid;  
grid-template-columns: repeat(4,1fr);  
justify-items: stretch;  
grid-gap: 1px;

.swiper-slide-inner {  
    width: 100%;  
    display: grid;  
    /优先垂直方向排列/  
    grid-auto-flow: column;  
    /分为三列，平均分/  
    /grid-template-columns: repeat(3, 1fr);/  
    grid-template-columns: 1fr 1fr 1fr;  
    /分为2行，平均分配/  
    /grid-template-rows: repeat(2, 1fr);/  
    grid-template-rows: 1fr 1fr;  
    grid-row-gap: 10px;  
    grid-column-gap: 10px;  
    .card-item {  
        display: flex;  
        flex-wrap: wrap;  
        width: 230px;  
        height: 230px;
    }
}