flexbox grid

1.container {
2    max-width: 1335px;
3    margin: 0 auto;
4}
5.grid-row {
6    display: flex;
7    flex-flow: row wrap;
8    justify-content: flex-start;
9}
10.grid-item {
11    height: 550px; /*optional*/
12    flex-basis: 20%; /* initial percantage */
13    -ms-flex: auto;
14    width: 259px; /*optional*/
15    position: relative;
16    padding: 10px; /*optional*/
17    box-sizing: border-box;
18}
19@media(max-width: 1333px) {/*xl*/
20	.grid-item {
21    	flex-basis: 33.33%;
22    }
23}
24@media(max-width: 1073px) {/*lg*/
25    .grid-item {
26    	flex-basis: 33.33%;
27    }
28}
29@media(max-width: 815px) {/*md*/
30	.grid-item {
31    	flex-basis: 50%;
32    }
33}
34@media(max-width: 555px) {/*sm*/
35	.grid-item {
36    	flex-basis: 100%;
37    }
38}

1<div class="row around-xs">
2    <div class="col-xs-2">
3        <div class="box">
4            around
5        </div>
6    </div>
7    <div class="col-xs-2">
8        <div class="box">
9            around
10        </div>
11    </div>
12    <div class="col-xs-2">
13        <div class="box">
14            around
15        </div>
16    </div>
17</div>
18