CODEWITHSUNDEEP
susy
lnickel
lnickel

Reputation: 351

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>

Upvotes: 1

Views: 466

Answers (2)

J&#246;rn
J&#246;rn

Reputation: 845

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.

Upvotes: 0

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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

Upvotes: 1

Related Questions