CodePen

HTML

            
              <div class="outer">
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
    <div class="box">
    <h2>DIV</h2>
</div>
    <div class="box">
    <h2>DIV</h2>
</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              div.outer {
  background: black;
  margin: -1px 0 0 1px;
  padding: 1px 0 0 1px;
  overflow: hidden;
  position: relative;
}

div.box {
  background: #FFF;
  float: left;
  margin: 0 1px 1px 0;
  width: 33.2%;
  width: -webkit-calc(33.33% - 1px);
  width: calc(33.33% - 1px);
}

div.box:last-child {
  position: relative;
}

div.box:last-child:before,
div.box:last-child:after {
  background: inherit;
  content: '';
  display: block;
  height: 100%;
  left: 100%;
  margin: 0 1px;
  position: absolute;
  width: 100%;
}

div.box:last-child:after {
  left: 200%;
  margin: 0 2px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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