<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span4">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>
    
  </div>
</div>

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Sansita, sans-serif;
}

.wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-right: 2.093333%;
}

.col {
  padding: 10px;
  border: 5px solid rgb(214,129,137);
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(233,78,119);
  color: #fff;
  margin-bottom: 1em;
  margin-left: 2.093333%;
  width: 6.20%;
  float: left;
}

.row::after {
  content: "";
  display: block;
  clear: both;
}

.col.span2 {
  width: calc((6.20%*2) + 2.093333%);
}

.col.span3 {
  width: calc((6.20%*3) + (2.093333%*2));
}

.col.span4 {
  width: calc((6.20%*4) + (2.093333%*3));
}