Flexbox Grid

Extra small

< 640px

Small

< 767px

Medium

< 992px

Large

< 1200px

Extra large

> 1200px

Префікс класу

.col_xs_

.col_sm_

.col_md_

.col_lg_

.col_

.col_1
.col_lg_3
.col-xs-6

.col_11
.col_lg_9
.col-xs-6

.col_2
.col_xs_6

.col_10
.col_xs_6

.col_3
.col_xs_6

.col_9
.col_xs_6

.col_4
.col_xs_6

.col_8
.col_xs_6

.col_5
.col_lg_6

.col_7
.col_lg_6

col_6

.col_4
.col_sm_12

.col_3
.col_md_6
.col_sm_12

.col_2
.col_md_4
.col_sm_12

.col_1
.col_lg_4
.col_xs_12

.col_12

HTML

<div class="wrapper">
	<div class="row_f">
		<div class="col_1 col_lg_3 col_xs_6">.col_1 <br> .col_lg_3 <br>.col-xs-6</div>
		<div class="col_11 col_lg_9 col_xs_6">.col_11 <br> .col_lg_9 <br>.col-xs-6</div>
		<div class="col_2 col_xs_6">.col_2 <br> .col_xs_6</div>
		<div class="col_10 col_xs_6">.col_10 <br> .col_xs_6</div>
		<div class="col_3 col_xs_6">.col_3 <br> .col_xs_6</div>
		<div class="col_9 col_xs_6">.col_9 <br> .col_xs_6</div>
		<div class="col_4 col_xs_6">.col_4 <br> .col_xs_6</div>
		<div class="col_8 col_xs_6">.col_8 <br> .col_xs_6</div>
		<div class="col_5 col_lg_6">.col_5 <br> .col_lg_6</div>
		<div class="col_7 col_lg_6">.col_7 <br> .col_lg_6</div>
		<div class="col_6">col_6</div>
		<div class="col_6">col_6</div>
		<div class="col_4 col_sm_12">.col_4 <br> .col_sm_12</div>
		<div class="col_4 col_sm_12">.col_4 <br> .col_sm_12</div>
		<div class="col_4 col_sm_12">.col_4 <br> .col_sm_12</div>
		<div class="col_3 col_md_6 col_sm_12">.col_3 <br> .col_md_6 <br> .col_sm_12</div>
		<div class="col_3 col_md_6 col_sm_12">.col_3 <br> .col_md_6 <br> .col_sm_12</div>
		<div class="col_3 col_md_6 col_sm_12">.col_3 <br> .col_md_6 <br> .col_sm_12</div>
		<div class="col_3 col_md_6 col_sm_12">.col_3 <br> .col_md_6 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_2 col_md_4 col_sm_12">.col_2 <br> .col_md_4 <br> .col_sm_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_1 col_lg_4 col_xs_12">.col_1 <br> .col_lg_4 <br> .col_xs_12</div>
		<div class="col_12">.col_12</div>
	</div>
</div>

CSS

.wrapper{width:100%;max-width:125rem;padding:0 1.5rem;margin:0 auto;position:relative}
.row_f{margin:0 -1.5rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.row_f .col_1,.row_f .col_2,.row_f .col_3,.row_f .col_4,.row_f .col_5,.row_f .col_6,.row_f .col_7,.row_f .col_8,.row_f .col_9,.row_f .col_10,.row_f .col_11,.row_f .col_12{margin:0 1.5rem}
.row_f .col_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
.row_f .col_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
.row_f .col_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
.row_f .col_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
.row_f .col_5{width:-webkit-calc(100% / 2.4 - 3.01rem);width:-moz-calc(100% / 2.4 - 3.01rem);width:calc(100% / 2.4 - 3.01rem)}
.row_f .col_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
.row_f .col_7{width:-webkit-calc(100% / 1.714285714285714 - 3.01rem);width:-moz-calc(100% / 1.714285714285714 - 3.01rem);width:calc(100% / 1.714285714285714 - 3.01rem)}
.row_f .col_8{width:-webkit-calc(100% / 1.5 - 3.01rem);width:-moz-calc(100% / 1.5 - 3.01rem);width:calc(100% / 1.5 - 3.01rem)}
.row_f .col_9{width:-webkit-calc(100% / 1.3333333333 - 3.01rem);width:-moz-calc(100% / 1.3333333333 - 3.01rem);width:calc(100% / 1.3333333333 - 3.01rem)}
.row_f .col_10{width:-webkit-calc(100% / 1.2 - 3.01rem);width:-moz-calc(100% / 1.2 - 3.01rem);width:calc(100% / 1.2 - 3.01rem)}
.row_f .col_11{width:-webkit-calc(100% / 1.0909090909091 - 3.01rem);width:-moz-calc(100% / 1.0909090909091 - 3.01rem);width:calc(100% / 1.0909090909091 - 3.01rem)}
.row_f .col_12{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}

@media only screen and (max-width: 1200px) {
	.row_f .col_lg_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
	.row_f .col_lg_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
	.row_f .col_lg_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
	.row_f .col_lg_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
	.row_f .col_lg_5{width:-webkit-calc(100% / 2.4 - 3.01rem);width:-moz-calc(100% / 2.4 - 3.01rem);width:calc(100% / 2.4 - 3.01rem)}
	.row_f .col_lg_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
	.row_f .col_lg_7{width:-webkit-calc(100% / 1.714285714285714 - 3.01rem);width:-moz-calc(100% / 1.714285714285714 - 3.01rem);width:calc(100% / 1.714285714285714 - 3.01rem)}
	.row_f .col_lg_8{width:-webkit-calc(100% / 1.5 - 3.01rem);width:-moz-calc(100% / 1.5 - 3.01rem);width:calc(100% / 1.5 - 3.01rem)}
	.row_f .col_lg_9{width:-webkit-calc(100% / 1.3333333333 - 3.01rem);width:-moz-calc(100% / 1.3333333333 - 3.01rem);width:calc(100% / 1.3333333333 - 3.01rem)}
	.row_f .col_lg_10{width:-webkit-calc(100% / 1.2 - 3.01rem);width:-moz-calc(100% / 1.2 - 3.01rem);width:calc(100% / 1.2 - 3.01rem)}
	.row_f .col_lg_11{width:-webkit-calc(100% / 1.0909090909091 - 3.01rem);width:-moz-calc(100% / 1.0909090909091 - 3.01rem);width:calc(100% / 1.0909090909091 - 3.01rem)}
	.row_f .col_lg_12{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
}

@media only screen and (max-width: 992px) {
	.row_f .col_md_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
	.row_f .col_md_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
	.row_f .col_md_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
	.row_f .col_md_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
	.row_f .col_md_5{width:-webkit-calc(100% / 2.4 - 3.01rem);width:-moz-calc(100% / 2.4 - 3.01rem);width:calc(100% / 2.4 - 3.01rem)}
	.row_f .col_md_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
	.row_f .col_md_7{width:-webkit-calc(100% / 1.714285714285714 - 3.01rem);width:-moz-calc(100% / 1.714285714285714 - 3.01rem);width:calc(100% / 1.714285714285714 - 3.01rem)}
	.row_f .col_md_8{width:-webkit-calc(100% / 1.5 - 3.01rem);width:-moz-calc(100% / 1.5 - 3.01rem);width:calc(100% / 1.5 - 3.01rem)}
	.row_f .col_md_9{width:-webkit-calc(100% / 1.3333333333 - 3.01rem);width:-moz-calc(100% / 1.3333333333 - 3.01rem);width:calc(100% / 1.3333333333 - 3.01rem)}
	.row_f .col_md_10{width:-webkit-calc(100% / 1.2 - 3.01rem);width:-moz-calc(100% / 1.2 - 3.01rem);width:calc(100% / 1.2 - 3.01rem)}
	.row_f .col_md_11{width:-webkit-calc(100% / 1.0909090909091 - 3.01rem);width:-moz-calc(100% / 1.0909090909091 - 3.01rem);width:calc(100% / 1.0909090909091 - 3.01rem)}
	.row_f .col_md_12{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
}

@media only screen and (max-width: 767px) {
	.row_f .col_sm_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
	.row_f .col_sm_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
	.row_f .col_sm_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
	.row_f .col_sm_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
	.row_f .col_sm_5{width:-webkit-calc(100% / 2.4 - 3.01rem);width:-moz-calc(100% / 2.4 - 3.01rem);width:calc(100% / 2.4 - 3.01rem)}
	.row_f .col_sm_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
	.row_f .col_sm_7{width:-webkit-calc(100% / 1.714285714285714 - 3.01rem);width:-moz-calc(100% / 1.714285714285714 - 3.01rem);width:calc(100% / 1.714285714285714 - 3.01rem)}
	.row_f .col_sm_8{width:-webkit-calc(100% / 1.5 - 3.01rem);width:-moz-calc(100% / 1.5 - 3.01rem);width:calc(100% / 1.5 - 3.01rem)}
	.row_f .col_sm_9{width:-webkit-calc(100% / 1.3333333333 - 3.01rem);width:-moz-calc(100% / 1.3333333333 - 3.01rem);width:calc(100% / 1.3333333333 - 3.01rem)}
	.row_f .col_sm_10{width:-webkit-calc(100% / 1.2 - 3.01rem);width:-moz-calc(100% / 1.2 - 3.01rem);width:calc(100% / 1.2 - 3.01rem)}
	.row_f .col_sm_11{width:-webkit-calc(100% / 1.0909090909091 - 3.01rem);width:-moz-calc(100% / 1.0909090909091 - 3.01rem);width:calc(100% / 1.0909090909091 - 3.01rem)}
	.row_f .col_sm_12{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
}

@media only screen and (max-width: 640px) {
	.row_f .col_xs_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
	.row_f .col_xs_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
	.row_f .col_xs_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
	.row_f .col_xs_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
	.row_f .col_xs_5{width:-webkit-calc(100% / 2.4 - 3.01rem);width:-moz-calc(100% / 2.4 - 3.01rem);width:calc(100% / 2.4 - 3.01rem)}
	.row_f .col_xs_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
	.row_f .col_xs_7{width:-webkit-calc(100% / 1.714285714285714 - 3.01rem);width:-moz-calc(100% / 1.714285714285714 - 3.01rem);width:calc(100% / 1.714285714285714 - 3.01rem)}
	.row_f .col_xs_8{width:-webkit-calc(100% / 1.5 - 3.01rem);width:-moz-calc(100% / 1.5 - 3.01rem);width:calc(100% / 1.5 - 3.01rem)}
	.row_f .col_xs_9{width:-webkit-calc(100% / 1.3333333333 - 3.01rem);width:-moz-calc(100% / 1.3333333333 - 3.01rem);width:calc(100% / 1.3333333333 - 3.01rem)}
	.row_f .col_xs_10{width:-webkit-calc(100% / 1.2 - 3.01rem);width:-moz-calc(100% / 1.2 - 3.01rem);width:calc(100% / 1.2 - 3.01rem)}
	.row_f .col_xs_11{width:-webkit-calc(100% / 1.0909090909091 - 3.01rem);width:-moz-calc(100% / 1.0909090909091 - 3.01rem);width:calc(100% / 1.0909090909091 - 3.01rem)}
	.row_f .col_xs_12{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
}

SCSS

/* Vars */
$wrapWidth:       125rem;
$gutter:          1.5rem;
$gutter-:         -1.5rem;
$zero:            0;

.wrapper {
	width: 100%;
	max-width: $wrapWidth;
	padding: $zero $gutter;
	margin: $zero auto;
	position: relative;
}

.row_f {
	margin: $zero $gutter-;
	display: flex;
	flex-wrap: wrap;
	
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		margin: $zero $gutter;
	}
	
	.col_1 {
		width: calc(100% / 12 - 3.01rem);
	}
	
	.col_2 {
		width: calc(100% / 6 - 3.01rem);
	}
	
	.col_3 {
		width: calc(100% / 4 - 3.01rem);
	}
	
	.col_4 {
		width: calc(100% / 3 - 3.01rem);
	}
	
	.col_5 {
		width: calc(100% / 2.4 - 3.01rem);
	}
	
	.col_6 {
		width: calc(100% / 2 - 3.01rem);
	}
	
	.col_7 {
		width: calc(100% / 1.714285714285714 - 3.01rem);
	}
	
	.col_8 {
		width: calc(100% / 1.5 - 3.01rem);
	}
	
	.col_9 {
		width: calc(100% / 1.3333333333 - 3.01rem);
	}
	
	.col_10 {
		width: calc(100% / 1.2 - 3.01rem);
	}
	
	.col_11 {
		width: calc(100% / 1.0909090909091 - 3.01rem);
	}
	
	.col_12 {
		width: calc(100% / 1 - 3.01rem);
	}
}

@media only screen and (max-width: 1200px) {
	.row_f {
		.col_lg_1 {
			width: calc(100% / 12 - 3.01rem);
		}
		
		.col_lg_2 {
			width: calc(100% / 6 - 3.01rem);
		}
		
		.col_lg_3 {
			width: calc(100% / 4 - 3.01rem);
		}
		
		.col_lg_4 {
			width: calc(100% / 3 - 3.01rem);
		}
		
		.col_lg_5 {
			width: calc(100% / 2.4 - 3.01rem);
		}
		
		.col_lg_6 {
			width: calc(100% / 2 - 3.01rem);
		}
		
		.col_lg_7 {
			width: calc(100% / 1.714285714285714 - 3.01rem);
		}
		
		.col_lg_8 {
			width: calc(100% / 1.5 - 3.01rem);
		}
		
		.col_lg_9 {
			width: calc(100% / 1.3333333333 - 3.01rem);
		}
		
		.col_lg_10 {
			width: calc(100% / 1.2 - 3.01rem);
		}
		
		.col_lg_11 {
			width: calc(100% / 1.0909090909091 - 3.01rem);
		}
		
		.col_lg_12 {
			width: calc(100% / 1 - 3.01rem);
		}
	}
}

@media only screen and (max-width: 992px) {
	.row_f {
		.col_md_1 {
			width: calc(100% / 12 - 3.01rem);
		}
		
		.col_md_2 {
			width: calc(100% / 6 - 3.01rem);
		}
		
		.col_md_3 {
			width: calc(100% / 4 - 3.01rem);
		}
		
		.col_md_4 {
			width: calc(100% / 3 - 3.01rem);
		}
		
		.col_md_5 {
			width: calc(100% / 2.4 - 3.01rem);
		}
		
		.col_md_6 {
			width: calc(100% / 2 - 3.01rem);
		}
		
		.col_md_7 {
			width: calc(100% / 1.714285714285714 - 3.01rem);
		}
		
		.col_md_8 {
			width: calc(100% / 1.5 - 3.01rem);
		}
		
		.col_md_9 {
			width: calc(100% / 1.3333333333 - 3.01rem);
		}
		
		.col_md_10 {
			width: calc(100% / 1.2 - 3.01rem);
		}
		
		.col_md_11 {
			width: calc(100% / 1.0909090909091 - 3.01rem);
		}
		
		.col_md_12 {
			width: calc(100% / 1 - 3.01rem);
		}
	}
}

@media only screen and (max-width: 767px) {
	.row_f {
		.col_sm_1 {
			width: calc(100% / 12 - 3.01rem);
		}
		
		.col_sm_2 {
			width: calc(100% / 6 - 3.01rem);
		}
		
		.col_sm_3 {
			width: calc(100% / 4 - 3.01rem);
		}
		
		.col_sm_4 {
			width: calc(100% / 3 - 3.01rem);
		}
		
		.col_sm_5 {
			width: calc(100% / 2.4 - 3.01rem);
		}
		
		.col_sm_6 {
			width: calc(100% / 2 - 3.01rem);
		}
		
		.col_sm_7 {
			width: calc(100% / 1.714285714285714 - 3.01rem);
		}
		
		.col_sm_8 {
			width: calc(100% / 1.5 - 3.01rem);
		}
		
		.col_sm_9 {
			width: calc(100% / 1.3333333333 - 3.01rem);
		}
		
		.col_sm_10 {
			width: calc(100% / 1.2 - 3.01rem);
		}
		
		.col_sm_11 {
			width: calc(100% / 1.0909090909091 - 3.01rem);
		}
		
		.col_sm_12 {
			width: calc(100% / 1 - 3.01rem);
		}
	}
}

@media only screen and (max-width: 640px) {
	.row_f {
		.col_xs_1 {
			width: calc(100% / 12 - 3.01rem);
		}
		
		.col_xs_2 {
			width: calc(100% / 6 - 3.01rem);
		}
		
		.col_xs_3 {
			width: calc(100% / 4 - 3.01rem);
		}
		
		.col_xs_4 {
			width: calc(100% / 3 - 3.01rem);
		}
		
		.col_xs_5 {
			width: calc(100% / 2.4 - 3.01rem);
		}
		
		.col_xs_6 {
			width: calc(100% / 2 - 3.01rem);
		}
		
		.col_xs_7 {
			width: calc(100% / 1.714285714285714 - 3.01rem);
		}
		
		.col_xs_8 {
			width: calc(100% / 1.5 - 3.01rem);
		}
		
		.col_xs_9 {
			width: calc(100% / 1.3333333333 - 3.01rem);
		}
		
		.col_xs_10 {
			width: calc(100% / 1.2 - 3.01rem);
		}
		
		.col_xs_11 {
			width: calc(100% / 1.0909090909091 - 3.01rem);
		}
		
		.col_xs_12 {
			width: calc(100% / 1 - 3.01rem);
		}
	}
}