felx box grid code example
Example 1: flexbox grid
.container {
max-width: 1335px;
margin: 0 auto;
}
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 550px;
flex-basis: 20%;
-ms-flex: auto;
width: 259px;
position: relative;
padding: 10px;
box-sizing: border-box;
}
@media(max-width: 1333px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 1073px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 815px) {
.grid-item {
flex-basis: 50%;
}
}
@media(max-width: 555px) {
.grid-item {
flex-basis: 100%;
}
}
Example 2: flex grid 3 columns
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>