Cacher is the code snippet organizer for pro developers

@mixin imagegrid($col, $margin) {
  width: ((100% - (($col - 1) * $margin)) / $col);
  &:nth-child(n) {
    margin-right: $margin;
    margin-bottom: $margin;
  }
  &:nth-child(#{$col}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

@mixin breakpoint($point) { // media queries
 @if $point == tablet {
   @media only screen and (max-width:991px) {
     @content;
   }
 }
 @else if $point == mobile {
   @media only screen and (max-width:767px){
     @content;
   }
 }
}

.grid {
  padding: 0 1%;
  .item {
    float: left;
    @include imagegrid(5, 1%);
  }
  img {
    display: block;
    width: 100%;
  }
  @include breakpoint(tablet){
    .item {
      @include imagegrid(3, 1%);
    }
  }
  @include breakpoint(mobile){
    .item {
      @include imagegrid(2, 1%);
    }
  }
}

<div class="grid">
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
  <div class="item">
    <img src="http://placehold.it/500x500" alt="thumbnail">
  </div>
</div>