Loop com SCSS para sistema de grid

.container { margin: 0 auto; width: 99%; @media (min-width: 700px) { width: 90%; } } // Cols $grid-columns: 12; [class*="col-"] { padding: 0 15px; } @media (min-width: 700px) { @for $i from 1 through $grid-columns { .col-#{$i} { width: percentage($i / $grid-columns); } } } // Row .row { display: flex; align-items: center; flex-direction: column; @media (min-width: 700px) { flex-direction: row; flex-wrap: wrap; } } 

<div class="container"> <div class="row"> <div class="col-12">Exemplo de grid</div> <div class="col-6">Exemplo de grid</div> <div class="col-6">Exemplo de grid</div> <div class="col-4">Exemplo de grid</div> <div class="col-4">Exemplo de grid</div> <div class="col-4">Exemplo de grid</div> </div> </div>