_custom.scss

// Your custom SCSS should be written here...
@import "fancytilesoutside";
// apply fancytilesoutside to the element containing your tiles (eg the <ul> tag)
ul.fancy {
  @include fancytilesoutside(3,2,1);
}

_fancytilesoutside.scss

@function divide-cols($colnum) {
  @return 100%/$colnum;
}
 
@mixin fancytilesoutside($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  margin-left: -$gutter / 2;
  margin-right: -$gutter / 2;
  > *{
    // These styles apply to all shift-columns
    display: inline-block;
    float: left;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
 
    // IE8 fallback
    width: divide-cols($mobile-columns);
 
    @include respond("min-width: #{$small-break}") {
      width: divide-cols($mobile-columns);
    }
 
    @include respond("min-width: #{$medium-break}") {
      width: divide-cols($tablet-columns);
    }
 
    @include respond("min-width: #{$large-break}") {
      width: divide-cols($desktop-columns);
    }
  }
}