Flexbox Grid

CSS

.wrapper{width:100%;max-width:125rem;padding:0 1.5rem;margin:0 auto;position:relative}
.wrapper::after{content:'';display:table;clear:both}
.row{margin:0 -1.5rem;*zoom:1}
.row::before{content:'';display:table}
.row::after{content:'';display:block;clear:both}
.row .col_1,.row .col_2,.row .col_3,.row .col_4,.row .col_5,.row .col_6,.row .col_7,.row .col_8,.row .col_9,.row .col_10,.row .col_11,.row .col_12{float:left;margin:0 1.5rem}
.row .col_1{width:-webkit-calc(100% / 12 - 3.01rem);width:-moz-calc(100% / 12 - 3.01rem);width:calc(100% / 12 - 3.01rem)}
.row .col_2{width:-webkit-calc(100% / 6 - 3.01rem);width:-moz-calc(100% / 6 - 3.01rem);width:calc(100% / 6 - 3.01rem)}
.row .col_3{width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem)}
.row .col_4{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
.row .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 .col_6{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
.row .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 .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 .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 .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 .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 .col_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;
	
	&::after {
		content: '';
        display: table;
        clear: both;
	}
}

.row {
	margin: $zero $gutter-;
	*zoom: 1;
	
	&::before {
		content: '';
		display: table;
	}

	&::after {
		content: '';
		display: block;
		clear: both;
	}
	
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		float: left;
		margin: 0 1.5rem;
	}
	
	.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);
	}
}