A single flexbox wrapping 5 colunm based row containing many wrapping columns

HTML
<p>A single wrapping 5 colunm based row containing many wrapping columns</p> <div class='row row-wrap row-center'> <div class='col-1'> <div class='box-base'>col-1</div> </div> <div class='col-1'> <div class='box-base'>col-1</div> </div> <div class='col-1'> <div class='box-base'>col-1</div> </div> <div class='col-1'> <div class='box-base'>col-4</div> </div> <div class='col-1'> <div class='box-base'>col-4</div> </div> <div class='col-1 col-grow'> <div class='box-base'>col-1 with grow</div> </div> <div class='col-1'> <div class='box-base'>col-1</div> </div> <div class='col-2'> <div class='box-base'>col-2</div> </div> <div class='col-4'> <div class='box-base'>col-4</div> </div> <div class='col-2'> <div class='box-base'>col-2</div> </div> </div>
SCSS
$total-columns: 5; $responsive-breakpoint: 767px; .row { display: flex; } .row-wrap { flex-wrap: wrap; } .row-center { justify-content: center; } [class*=col-] { display: inline-block; width: 100%; } @for $i from 1 through $total-columns { @media (min-width: $responsive-breakpoint){ .col-#{$i} { width: ($i / $total-columns) * 100%; } } } .col-grow { flex-grow: 1; } .box-base { color: white; background-color: gray; margin: 10px; padding: 10px; }
JAVASCRIPT
Expand for more options Login