somascope
1/4/2020 - 10:21 PM

CSS Flexbox Image Gallery

/*
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%; }
}