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