<ul class="clearfix">
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/1.png" alt="">
      <figcaption>Enterdum et malesuada fames ac ante ipsum primis in faucibus.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/2.png" alt="">
      <figcaption>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/3.png" alt="">
      <figcaption>Donec lectus urna, varius et rutrum quis, commodo sit amet diam.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/4.png" alt="">
      <figcaption>Fusce ac felis vel metus.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/5.png" alt="">
      <figcaption>Phasellus blandit, eros ac aliquet sollicitudin.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/6.png" alt="">
      <figcaption>Cras et tincidunt nisi, ut semper ex. Ut iaculis eget urna sed auctor.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/7.png" alt="">
      <figcaption>Nulla suscipit vestibulum dolor. Praesent tincidunt justo risus, ac aliquam purus scelerisque.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/8.png" alt="">
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/9.png" alt="">
      <figcaption>Phasellus ornare rutrum fringilla.</figcaption>
    </figure>
  </li>
</ul>
body {
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
  background: #cfd8dc;
  color: #37474f;
}

figure {
  background: whitesmoke;
  margin: 0 0 40px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

figcaption {
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
}

@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.