Image Grid

An image grid example for Learn Article.

by James Mathias

HTML

<div class="collection">
	<ul class="img-grid">
		<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{
	list-style-type: none;
	margin: 0;

		li{
			margin-bottom: 20px;
		}

		figure{
			margin: 0;

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

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

			li{
				box-sizing: border-box;
				float: left;
				padding: 0 10px;
				width: 50%;
			}
	}
}

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

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