<div class="container">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/eyes-like-the-sky.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/gumboot-soup.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/microtonal-banana.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/polygondwanaland.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/twelve-bar-bruise.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/quarters.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/sketches-of-brunswick-east.jpg" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323064/nonagon-infinity.jpg" alt="">
</div>

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
input {
  box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
}

img,
embed,
object,
video {
	max-width: 100%; // without it images break away from columns
	height: auto;
}

.container {
	// Define the display behavior
	display: grid;
	// Create the columns
	grid-template-columns: repeat(3, 1fr);
	// Define the areas
	grid-template-areas: "header   header   header"
                       "main     main     sidebar"
                       "footer   footer   footer";
	// Define the spacing
	grid-gap: 10px;

	background: whitesmoke;
}

.container img:nth-of-type(1) {
	grid-area: header;
}

.container img:nth-of-type(2) {
	grid-area: main;
}

.container img:nth-of-type(3) {
	grid-area: sidebar;
}

.container img:nth-of-type(3) {
	grid-area: footer;
}