Generated by SassMeister.com.

SassMeister-input-HTML.haml

%div.tiles__container
  %h2.sub-heading
    = "3 Up"
  %div{:class => 'tiles tiles--3-up' }
    - (1..9).each do |i|
      - width = 180 + Random.rand(20)
      - height = 70 + Random.rand(30)
      %div{class: 'tile-item tile-item--logo'}
        %img{src: "http://lorempixel.com/#{width}/#{height}/nature?a=#{i}"}

  %h2.sub-heading
    = "4 Up"
  %div{:class => 'tiles tiles--4-up' }
    - (1..12).each do |i|
      - width = 120 + Random.rand(20)
      - height = 70 + Random.rand(30)
      %div{class: 'tile-item tile-item--logo'}
        %img{src: "http://lorempixel.com/#{width}/#{height}/nature?a=#{i}"}

  %h2.sub-heading
    = "5 Up"
  %div{:class => 'tiles tiles--5-up' }
    - (1..15).each do |i|
      - width = 90 + Random.rand(20)
      - height = 70 + Random.rand(30)
      %div{class: 'tile-item tile-item--logo'}
        %img{src: "http://lorempixel.com/#{width}/#{height}/nature?a=#{i}"}

  %h2.sub-heading
    = "6 Up"
  %div{:class => 'tiles tiles--6-up' }
    - (1..18).each do |i|
      - width = 90 + Random.rand(20)
      - height = 70 + Random.rand(30)
      %div{class: 'tile-item tile-item--logo'}
        %img{src: "http://lorempixel.com/#{width}/#{height}/nature?a=#{i}"}

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Bourbon (v4.2.0)
// Neat (v1.6.0)
// Scut (v1.1.2)
// ----

@import "bourbon/bourbon";
@import "neat/neat";
@import "scut";

body {
  background: #efefef;
}

.sub-heading {
  text-align: center;
}

.tiles__container {
  @include outer-container;
  background: #fff;
}
.tiles {
  @include scut-clearfix;
  @include scut-padding(20px n);
  border-bottom: 1px solid #999;
}
  .tile-item {
    @include span-columns(2);
    margin-bottom: $gutter;
  }

.tile-item--logo {
  @include scut-padding(15px n);
  position: relative;
  height: 130px;
  background: #ddd;

  img {
    @include scut-margin(n auto);
    @include scut-absolute(50% n n 50%);
    @include transform(translateY(-50%) translateX(-50%));
  }
}

@function tiles-width($n) {
  @return $n * $column + ($n - 1) * $gutter;
}

.tiles--3-up {
  .tile-item {
    @include span-columns(4);
    @include omega(3n);
  }
}

.tiles--4-up {
  @include scut-margin(n auto);
  max-width: tiles-width(10);
  
  .tile-item {
    @include span-columns(1 of 4);
    @include omega(4n);
  }
}

.tiles--5-up {
  @include scut-margin(n auto);
  max-width: tiles-width(10);

  .tile-item {
    @include span-columns(1 of 5);
    @include omega(5n);
  }
}

.tiles--6-up {
  .tile-item {
    @include omega(6n);
  }
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
* v1.1.2
* Docs at http://davidtheclark.github.io/scut
*/
body {
  background: #efefef;
}

.sub-heading {
  text-align: center;
}

.tiles__container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
}
.tiles__container:before, .tiles__container:after {
  content: " ";
  display: table;
}
.tiles__container:after {
  clear: both;
}

.tiles {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
}
.tiles:after {
  content: "";
  display: table;
  clear: both;
}

.tile-item {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 14.70196%;
  margin-bottom: 1.618em;
}
.tile-item:last-child {
  margin-right: 0;
}

.tile-item--logo {
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
  height: 130px;
  background: #ddd;
}
.tile-item--logo img {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.tiles--3-up .tile-item {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.tiles--3-up .tile-item:last-child {
  margin-right: 0;
}
.tiles--3-up .tile-item:nth-child(3n) {
  margin-right: 0;
}
.tiles--3-up .tile-item:nth-child(3n+1) {
  clear: left;
}

.tiles--4-up {
  margin-left: auto;
  margin-right: auto;
  max-width: 56.92001em;
}
.tiles--4-up .tile-item {
  float: left;
  display: block;
  margin-right: 7.42297%;
  width: 19.43277%;
}
.tiles--4-up .tile-item:last-child {
  margin-right: 0;
}
.tiles--4-up .tile-item:nth-child(4n) {
  margin-right: 0;
}
.tiles--4-up .tile-item:nth-child(4n+1) {
  clear: left;
}

.tiles--5-up {
  margin-left: auto;
  margin-right: auto;
  max-width: 56.92001em;
}
.tiles--5-up .tile-item {
  float: left;
  display: block;
  margin-right: 5.85151%;
  width: 15.3188%;
}
.tiles--5-up .tile-item:last-child {
  margin-right: 0;
}
.tiles--5-up .tile-item:nth-child(5n) {
  margin-right: 0;
}
.tiles--5-up .tile-item:nth-child(5n+1) {
  clear: left;
}

.tiles--6-up .tile-item:nth-child(6n) {
  margin-right: 0;
}
.tiles--6-up .tile-item:nth-child(6n+1) {
  clear: left;
}

SassMeister-rendered.html

<div class='tiles__container'>
  <h2 class='sub-heading'>
    3 Up
  </h2>
  <div class='tiles tiles--3-up'>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/183/79/nature?a=1'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/189/87/nature?a=2'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/180/94/nature?a=3'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/188/81/nature?a=4'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/182/75/nature?a=5'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/195/80/nature?a=6'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/180/78/nature?a=7'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/192/74/nature?a=8'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/199/92/nature?a=9'>
    </div>
  </div>
  <h2 class='sub-heading'>
    4 Up
  </h2>
  <div class='tiles tiles--4-up'>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/139/83/nature?a=1'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/131/77/nature?a=2'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/120/83/nature?a=3'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/139/90/nature?a=4'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/126/99/nature?a=5'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/127/83/nature?a=6'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/126/79/nature?a=7'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/128/78/nature?a=8'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/136/99/nature?a=9'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/121/84/nature?a=10'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/133/74/nature?a=11'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/132/70/nature?a=12'>
    </div>
  </div>
  <h2 class='sub-heading'>
    5 Up
  </h2>
  <div class='tiles tiles--5-up'>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/103/91/nature?a=1'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/105/85/nature?a=2'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/98/90/nature?a=3'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/106/98/nature?a=4'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/94/79/nature?a=5'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/106/98/nature?a=6'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/96/90/nature?a=7'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/90/77/nature?a=8'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/93/88/nature?a=9'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/101/71/nature?a=10'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/92/74/nature?a=11'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/94/97/nature?a=12'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/97/86/nature?a=13'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/92/99/nature?a=14'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/98/86/nature?a=15'>
    </div>
  </div>
  <h2 class='sub-heading'>
    6 Up
  </h2>
  <div class='tiles tiles--6-up'>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/102/74/nature?a=1'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/103/85/nature?a=2'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/108/91/nature?a=3'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/106/80/nature?a=4'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/101/73/nature?a=5'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/106/98/nature?a=6'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/93/79/nature?a=7'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/100/87/nature?a=8'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/95/94/nature?a=9'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/97/78/nature?a=10'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/94/79/nature?a=11'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/102/77/nature?a=12'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/91/95/nature?a=13'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/90/82/nature?a=14'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/105/83/nature?a=15'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/99/87/nature?a=16'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/108/76/nature?a=17'>
    </div>
    <div class='tile-item tile-item--logo'>
      <img src='http://lorempixel.com/108/93/nature?a=18'>
    </div>
  </div>
</div>