/*
Given the following HTML with multiple li elements...
<ul>
<li>
<figure>
<img src="gallery/apple-pie.jpg" alt="Apple pie.">
<figcaption>Apple pie, featuring apples from the latest harvest.</figcaption>
</figure>
</li>
...
...
...
</ul>
*/
/* Option 1 */
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
}
li {
flex: auto; /* even up the spacing */
}
img {
width: 100%; /* stretch the images */
}
/* Option 2: multiple known columns */
@media (min-width: 605px) {
li { flex: 0 0 50%; }
}
@media (min-width: 910px) {
li { flex: 0 0 33%; }
}
@media (min-width: 1240px) {
li { flex: 0 0 25%; }
}