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;
}
1 Response