Image Grid Flex

An image grid using Flexbox example for Learn Article.

by James Mathias

HTML

<div class="collection">
	<ul class="img-grid-flex">
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
		<li>
			<figure>
				<img src="https://expressionengine.com/asset/img/learn/example.png">
			</figure>
		</li>
	</ul>
</div>

SCSS

.img-grid-flex{
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0;

		li{
			box-sizing: border-box;
			// grow shrink basis
			flex: 0 1 100%;
			// allows incomplete rows to grow as needed.
			// flex: 1 0 100%;
			margin-bottom: 20px;
		}

		figure{
			margin: 0;

				img{
					max-width: 100%;
				}
		}
}

// responsibility
@media screen and (min-width: 414px){
	.img-grid-flex{
		margin: 0 -10px;

			li{
				flex-basis: 50%;
				padding: 0 10px;
			}
	}
}

@media screen and (min-width: 750px){
	.img-grid-flex{
		li{
			flex-basis: 33.33%;
		}
	}
}

@media screen and (min-width: 1200px){
	.img-grid-flex{
		li{
			flex-basis: 25%;
		}
	}
}