Susy Gallery Center Last Row

Question

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>

score 1 · Accepted Answer · answered Oct 20 '15 at 16:23

1

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;
  }
}

answered Oct 20 '15 at 16:23

Miriam Suzanne

13,632
2
38
43

Ok after seeing your suggestion I went with simply.... @include span(3 of 12); margin-left: gutter(3); – lnickel Oct 21 '15 at 14:59
1

That `margin-left: gutter(3)` is basically giving you an arbitrary number. You're asking Susy to give you a gutter width as though you are in a context of `3`, which you aren't. You really want to push it in a column and a half (in a context of `12`). It might work, but in that case Susy is making your code *less clear*. – Miriam Suzanne Oct 22 '15 at 16:59
Thank you for that explanation! – lnickel Nov 16 '15 at 15:49

Jörn · Answer 2 · 2017-10-30T08:25:52.030

Stumbled over the answer today and couldn't use flexbox for several reasons. My solutions with @gallery seems to work well. I was even able to reset a previously created centering which seems necessary if you're adjusting the gallery sizes in media queries.

NOTE: that i'm using @breakpoint in the following example:

article {
    @include breakpoint($medium-up) {
        @include gallery(6 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: red;
            margin-left: auto;
            margin-right: auto;
            float: none;
        }
    }

    @include breakpoint($large-up) {
        @include gallery(4 of 12);

        &:last-child:nth-last-child(2n + 1) {
            background-color: green;
            margin-left: get-span-width(8 of 12 wide);
            margin-right: -100%;
            float: left;
        }
    }
}

I had some trouble figuring out how i could recalculate the given offset and after digging through the gallery() -> get-isolation() -> get-span-width() function of susy itself i was able to find it here.

EDIT:

I've also found this article and codepen which can help too.

Susy Gallery Center Last Row

2 Answers2