<div class="container">
  <div class="row">
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
  </div>

  <div class="row">
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
  </div>

  <div class="row">
    <div class="m--3">
      <div class="demo">m3</div>
    </div>
    <div class="m--3">
      <div class="demo">m3</div>
    </div>
    <div class="m--3">
      <div class="demo">m3</div>
    </div>
    <div class="m--3">
      <div class="demo">m3</div>
    </div>
  </div>

  <div class="row">
    <div class="m--4">
      <div class="demo">m4</div>
    </div>
    <div class="m--4">
      <div class="demo">m4</div>
    </div>
    <div class="m--4">
      <div class="demo">m4</div>
    </div>
  </div>

  <div class="row">
    <div class="m--5">
      <div class="demo">m5</div>
    </div>
    <div class="m--7">
      <div class="demo">m7</div>
    </div>
  </div>

  <div class="row">
    <div class="m--6">
      <div class="demo">m6</div>
    </div>
    <div class="m--6">
      <div class="demo">m6</div>
    </div>
  </div>

  <div class="row">
    <div class="m--7">
      <div class="demo">m7</div>
    </div>
    <div class="m--5">
      <div class="demo">m5</div>
    </div>
  </div>

  <div class="row">
    <div class="m--8">
      <div class="demo">m8</div>
    </div>
    <div class="m--4">
      <div class="demo">m4</div>
    </div>
  </div>

  <div class="row">
    <div class="m--9">
      <div class="demo">m9</div>
    </div>
    <div class="m--3">
      <div class="demo">m3</div>
    </div>
  </div>

  <div class="row">
    <div class="m--10">
      <div class="demo">m10</div>
    </div>
    <div class="m--2">
      <div class="demo">m2</div>
    </div>
  </div>

  <div class="row">
    <div class="m--11">
      <div class="demo">m11</div>
    </div>
    <div class="m--1">
      <div class="demo">m1</div>
    </div>
  </div>

  <div class="row">
    <div class="m--12">
      <div class="demo">m12</div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

:root{
	--color: #0C3934;
	--bg: #F8EBEE;
	
	/* Grid */
	--gutter: 10px;
	--columns: 12;
}

body{
	background-color: var(--bg);
	font: normal 1em/1.5 "Roboto", sans-serif
}

.container {
  max-width: 1140px;
  margin: 3em auto;
	padding: var(--gutter);
}

*{
	box-sizing: border-box;
}

.row{
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc(var(--gutter) - ( var(--gutter) * 2) ) 20px;
}

[class*="m--"]{ 
	padding-right: calc(var(--gutter));
	padding-left: calc(var(--gutter));
	flex-basis: calc((100% / var(--columns)) * var(--column-width)); 
  
  @for $i from 1 through 12 {
    &.m--#{$i} {
      --column-width: $i;
    }
  }
}

.demo{
	display: block;
	background-color: var(--color);
  text-align: center;
  color: #fff;
  line-height: 3em;
}