Ultra simple grid

grid.scss

// Column bottom margin and width on mobile when columns are stacked
.col{
	width:100%;
	margin-bottom:2em;
}

$gap : 35px; // space between columnd
$gutter : $gap / 2;

// Grid system for screen larger than 800px
@media screen and (min-width: 800px) {

	.row{ // container
		display:flex; // magic!
		width: calc(100% + #{$gap} );
		margin-left: -$gutter;
	}
	
	.col{
		padding: 0 $gutter;
		margin-bottom: 0;
	}

	// loop for 12 columns
	@for $i from 1 through 12 {
		.col-#{$i}{
			width: ( $i * 100% / 12 ) ; // .col-6 will be 50% with etc...
		}
	}
} // end media query

/*
Like:

<div class="row">
	<div class="col col-6">
		My first half width column
	</div>
	<div class="col col-6">
		My second half width column
	</div>
</div>

and so on...
*/