Susy Gallery Centre Последняя строка

Question

Использование Susy 2 и попытка центрировать последнюю строку в галерее susy. Интересно, что у меня есть нечетное количество логотипов, которые необходимо отобразить. Всего 15. Я попробовал просто поместить последние 3 в отдельный div и возиться с этим, но похоже, что я добавляю больше ненужного кода. Есть идеи? Спасибо заранее!

Вот Mixin я нашел здесь некоторое время назад для замены функции п-омега отклонил от Susy 1:

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

Я пытался просто просто охватывать COLS первые

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

затем используется галерея

.partner { 
    @include gallery(3); 

} 

Вот 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> 

Answer 1

Нет никакого способа сделать центрирование с поплавками, поэтому вам нужно будет использовать другую технику вместе - либо в полном списке, либо в последних трех. Мои предпочтения в этом - использование flexbox, но это исключает некоторые старые браузеры. Другим вариантом может быть использование встроенного блока, но это связано с его собственными проблемами. В любом случае, нет Susy Примеси, чтобы сделать это для вас, но вы можете использовать Susy функции (span и gutter), чтобы держать вас в соответствие с сеткой:

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

Answer 2

споткнулся ответ сегодня и не мог используйте flexbox по нескольким причинам. Мои решения с @gallery, похоже, работают хорошо. Я даже смог сбросить ранее созданное центрирование, которое кажется необходимым, если вы настраиваете размеры галереи в запросах мультимедиа.

Примечание: что я использую @breakpoint в следующем примере:

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

У меня были некоторые проблемы, выясняя, как я мог бы пересчитать заданное смещение и после рытья через gallery() ->get-isolation() ->get-span-width() функция susy сам я был в состоянии найти это here.

EDIT:

Я также нашел, что это article и codepen который тоже может помочь.