Image set 4x1

index.html

<style type="text/css">
    
.image-gallery ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0px auto;
    padding: 0px;
}

.image-gallery li {
    margin: 0 10px;
    flex-basis: calc(25% - 20px);
}

.image-gallery img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 48em) {
  .image-gallery li {
    margin: 10px;
    flex-basis: calc(50% - 20px);
  }
}



</style>

<div class="image-gallery">
    <ul>
        <li>
            <img src="http://propublica.s3.amazonaws.com/projects/graphics/img/placeholder.png" alt="First gallery image" />
            <figcaption class="attribution">
                <span class="attribution__caption">Caption 1</span>    
            </figcaption>
        </li>
        <li>
            <img src="http://propublica.s3.amazonaws.com/projects/graphics/img/placeholder.png" alt="First gallery image" />
            <figcaption class="attribution">
                <span class="attribution__caption">Caption 2</span>    
            </figcaption>
        </li>
        <li>
            <img src="http://propublica.s3.amazonaws.com/projects/graphics/img/placeholder.png" alt="First gallery image" />
            <figcaption class="attribution">
                <span class="attribution__caption">Caption 3</span>    
            </figcaption>
        </li>
        <li>
            <img src="http://propublica.s3.amazonaws.com/projects/graphics/img/placeholder.png" alt="First gallery image" />
            <figcaption class="attribution">
                <span class="attribution__caption">Caption 4</span>    
            </figcaption>
        </li>
    </ul>
</div>