<figure>
  <div class="container default">
    <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>
  <figcaption>default</figcaption>
</figure>

<figure>
  <div class="container pattern">
    <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>
  <figcaption>repeating pattern</figcaption>
</figure>

*,
*::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 behaviour
  display: grid;
  // Create the gutters
  grid-gap: 5px;
  // Define bg color for container
  background: whitesmoke;
}

.default {
  // Create the columns. Make 5 columns 100px wide.
  grid-template-columns: repeat(5, 100px);
}

.pattern {
  // This creates a pattern that repeats twice.
  // first column is 50px and the next is 1fr. the final column is 150px
  grid-template-columns: repeat(2, 50px 1fr) 150px;
}