CodePen

HTML

            
              <div class="wrapper group">
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div
</div>
            
          
!

CSS

            
              .wrapper {
  width:50%;
  background:#badas55;
  margin:0 auto;
  
}

.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}

.col-1-4 {
  width: 25%;
  float:left;
  height:190px;
  background:lightgreen;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border:1px solid black;
}

  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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