<section class="masonry">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

$black: rgb(0, 0, 0);
$white: lighten($black, 100%);

$ggap: 2vw;
$grows: [25vh, 15vh];
$gsize-h: 15vh;
$gsize-w: 20vw;

* {
  
  &,
  *:before,
  *:after {
    box-sizing: border-box;
  }
}

.masonry {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: nth($grows, 1) nth($grows, 2);
  grid-gap: $ggap;
  grid-template-columns: repeat(auto-fill, minmax($gsize-w, 1fr));
  grid-template-rows: repeat(auto-fill, minmax($gsize-h, 1fr));
  padding: $ggap;
  
  .item {
    background-repeat: no-repeat;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg);
    background-size: cover;
    background-position: center center;
    box-shadow: 0px 10px 20px 0px rgba($black, 0.5);
    
    &:nth-of-type(3n+1) {
      
      &:nth-child(even) {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0121.jpg);
      }
    }
    
    &:nth-of-type(4n+1) {
      
      &:nth-child(odd) {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_1151.jpg);
      }
    }
    
    @media (min-width: 480px) {
      
      &:nth-child(5n+5) {
        grid-area: span 2 / span 2;
      }
      
      &:nth-child(6n) {
        grid-column: span 2;
      }
    }
  }
}