CodePen

HTML

            
              <!-- Based on http://codepen.io/chriscoyier/pen/eGcLw -->
<div class="container">
  <div class="grid">
    <div class="col-2-3">
      <div class="module">
        <p>66.6666%</p>
      </div>
      <div class="col-1-2">
        <div class="module">
          <p>50% nested</p>
        </div>
      </div>
      <div class="col-1-2">
        <div class="module">
          <p>50% nested</p>
        </div>
      </div>
    </div>
    <div class="col-1-3">
      <div class="module">
        <p>33.3333%</p>
      </div>
    </div>
    <div class="col-1-3">
      <div class="col-1-2">
        <div class="module">
          <p>50% nested</p>
        </div>
      </div>
      <div class="col-1-2">
        <div class="module">
          <p>50% nested</p>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="col-1-3">
      <div class="module">
        <p>33.3333%</p>
      </div>
    </div>
    <div class="col-1-6">
      <div class="module">
        <p>16.6666%</p>
      </div>
    </div>
    <div class="col-1-6">
      <div class="module">
        <p>16.6666%</p>
      </div>
    </div>
    <div class="col-1-6">
      <div class="module">
        <p>16.6666%</p>
      </div>
    </div>
    <div class="col-1-6">
      <div class="module">
        <p>16.6666%</p>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="col-1-2">
      <div class="module">
        <p>50%</p>
      </div>
    </div>
    <div class="col-1-2">
      <div class="module">
        <p>50%</p>
      </div>
    </div>
    <div class="col-3-4">
      <div class="module">
        <p>75%</p>
      </div>
    </div>
    <div class="col-1-4">
      <div class="module">
        <p>25%</p>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="col-3-5">
      <div class="module">
        <p>60%</p>
      </div>
    </div>
    <div class="col-2-5">
      <div class="module">
        <p>40%</p>
      </div>
    </div>
    <div class="col-4-5">
      <div class="module">
        <p>80% Pickles</p>
      </div>
    </div>
    <div class="col-1-5">
      <div class="module">
        <p>20% Croco</p>
      </div>
    </div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing: border-box;
}

p {
  text-align: center;
}

.container {
  width: 80%;
  padding: 5px 10px;
  margin: 0 auto;
  background: rgb(244,184,196);
}

.grid {
  overflow: hidden; /* quick & dirty clearfix */
  clear: both;
  padding: 5px 0;
}

[class*="col-"] {
  overflow: hidden; /* quick & dirty clearfix */
  float: left;
  background: rgb(185,228,201);
}

.col-1-2 { width: 50%; }
.col-1-3 { width: 33.3333%; }
.col-2-3 { width: 66.6666%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-5 { width: 20%; }
.col-2-5 { width: 40%; }
.col-3-5 { width: 60%; }
.col-4-5 { width: 80%; }
.col-1-6 { width: 16.6666%; }
.col-5-6 { width: 83.3333%; }

.module {
  margin: 0 10px;
  padding: 10px;
  background: rgb(225,225,225);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................