Full Width Image Grid

Full-Width-Image-Grid.markdown

Full Width Image Grid

An example of an image grid where the images expand to always cover the entire width of the page while staying in rows of three with minimal (ideally no) space in between. I will have a live example of this soon in a site I'm doing.

A Pen by Nick LaDart on CodePen.

License.

index.html

<section>
	<ul>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
		<li><img src="http://placehold.it/900x650/000/CFCFCF"></li>
	</ul>
</section>

style.css

ul {
	display: table;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

li {
	display: table-cell;
	width: 33%;
	height: auto;
	text-decoration: none;
	list-style-type: none;
	float: left;
  margin-top: -4px;
  border: 1px solid #eee;
}

img {
	width: 100%;
	height: auto;
}