Skip to content

Instantly share code, notes, and snippets.

@lenagroeger
Created August 30, 2022 21:39
Show Gist options
  • Save lenagroeger/f28475398472c0998e99c398bf50580b to your computer and use it in GitHub Desktop.
Save lenagroeger/f28475398472c0998e99c398bf50580b to your computer and use it in GitHub Desktop.
Image set 4x1
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment