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>