<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 {
  padding: 40px;
  background-color: rgb(61, 63, 112);
  font: 1.2em/1.4 "Open Sans", sans-serif;
}

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

.col {
  padding: 10px;
  font-weight: bold;
  border-radius: 10px;
  border:5px solid rgb(255,255,255);
  background-color: rgba(255,255,255,.7);
  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));
}

Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

This Pen doesn't use any external JavaScript resources.