<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.