<div class="row">
   <div class="a">A</div><!--
--><div class="b">B</div><!--
--><div class="c">C</div><!--
--><div class="d">D</div><!--
--><div class="e">E</div><!--
--><div class="f">F</div>
</div>

<!-- Html comments used to remove inline whitespace: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->

.row div {
  /* The vertical alignment magic */
  display: inline-block;
  vertical-align: middle;
  
  width: 100%; /* Needs width for inline-block */
 
  /* Fix for IE <= 7 */
  *display: inline;
  *zoom:1;
  *width: 16.6%;
}

/* Change number of boxes per row based on viewport width */
@media (min-width: 300px) {
  .row div {
    width: 50%;
  }
}
@media all and (min-width: 500px) {
  .row div {
    width: 33.3333333%;
  }
}
@media all and (min-width: 700px) {
  .row div {
    width: 16.6666667%;
  }
}

/* Set height and color of boxes */
.a {
  padding: 3em 0;
  background: #7e3ac4;
}
.b {
  padding: 1.5em 0;
  background: #3a71c4;
}
.c {
  padding: 2.5em 0;
  background: #3ac4b5;
}
.d {
  padding: 1.5em 0;
  background: #4dc43a;
}
.e {
  padding: 2em 0;
  background: #c4ac3a;
}
.f {
  padding: 3.5em 0;
  background: #c44d3a;
}

body { background-color: #f7f7f7; font-family: sans-serif; font-weight: bold; color: #fff; text-align: center; }