Susy Gallery Center Last Row

Using Susy 2 and trying to center the last row in the susy gallery. Interestingly enough I only have an odd number of logos needed to be displayed. 15 in total. I tried just putting the last 3 in a separate div and messing with that but that seems like I'm adding more un-needed code. Any ideas? Many thanks in advance!

Here is a mixin I found on here awhile back for replacing the nth-omega function nixed from Susy 1:

@mixin nth-last($n, $type: child) {
&:nth-#{$type}(#{$n}) {
    @include last;
   }
}

I tried simply to just do span cols first

.partner {
   @include span(3 of 12);
   @include nth-last(4);   
}

then used the gallery

.partner {
   @include gallery(3);

}

Here is the HTML

<div class="logos">
     <div class="partner"><img src="images/partners/envestnet.jpg"/></div>
     <div class="partner"><img src="images/partners/guggenheim.jpg"/></div>
     <div class="partner"><img src="images/partners/usbancorp.jpg"/></div>
     <div class="partner"><img src="images/partners/advent.jpg"/></div>
     <div class="partner"><img src="images/partners/charles-schwab.jpg"/></div>
     <div class="partner"><img src="images/partners/bloomberg.jpg"/></div>
     <div class="partner"><img src="images/partners/stifel.jpg"/></div>
     <div class="partner"><img src="images/partners/pershing.jpg"/></div>
     <div class="partner"><img src="images/partners/credit-suisse.jpg"/></div>
     <div class="partner"><img src="images/partners/fidelity.jpg"/></div>
     <div class="partner"><img src="images/partners/sp.jpg"/></div>
     <div class="partner"><img src="images/partners/ultimus.jpg"/></div>
     <div class="partner"><img src="images/partners/hsg.jpg"/></div>
     <div class="partner"><img src="images/partners/deutsche-bank.jpg"/></div>
     <div class="partner"><img src="images/partners/interactive-brokers.jpg"/></div>
</div>

Solution

There's no good way to do centering with floats, so you'll need to use a different technique all together - either on the full list, or on the last three. My preference for this is using flexbox, but that excludes some older browsers. Another option might be using inline-block, but that comes with it's own challenges. In either case, there are no Susy mixins to do it for you, but you can use susy functions (span and gutter) to keep you aligned to the grid:

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner {
  width: span(3 of 12);
  margin-right: gutter(12);

  &:nth-child(4n),
  &:last-child {
    margin-right: 0;
  }
}