web前端栅格布局

.row{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}

$list: 1 2 3 4 5 6 7 8 9 10 11 12;
@each $v in $list{
    .col-#{$v}{
        grid-column: span #{$v};
    }
}

  

<div class="row">
<div class="col-6"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>

  

posted @ 2020-03-11 14:32  南侠书生  阅读(1010)  评论(0编辑  收藏  举报