如何將畫廊中不平整列表項目的最後一行居中

Question

我試圖讓我的玩具項目在此時作出響應，並且遇到了一個問題，我不確定是否可以解決該問題，以及該修補程序是否有意義。目前我SCSS代碼如下所示（使用與Susy和斷點）：

.moodlegrid{ 
    @include with-grid-settings($gutter: 0.85%){ 
     li{ 
      @include trailer(0.5); 
      @include isolate-grid(6,18); 
      @include breakpoint($william){ 
       &:nth-child(3n + 1) { clear: none; } 
       @include isolate-grid(9,18); 
      } 
      @include breakpoint($jack){ 
       &:nth-child(2n + 1) { clear: none; } 
       @include isolate-grid(18,18); 
      } 
     } 
    } 
} 

在桌面screensizes我得到一個3x3的圖像柵格：

在一箇中等規模的屏幕我選擇了一個2列的顯示，這導致單個列表項在九個在最後一行的底部：

因此，將最後一行的不平整項目居中（此時最後一項填滿並卡住左欄）是否有意義？用Susy和簡單的CSS來完成這項工作很容易嗎？任何建議和靈感在哪個方向去頭和嘗試將不勝感激cuz在這種情況下，我有點失落和想法如何對待這件事。 ：最好的問候拉爾夫

Answer 1

所有你需要做的是重新定位的任何:last-child，這也是:nth-child(odd) - 從左側移動它，推它一半的剩餘距離：

@include breakpoint($william){ 
    &:nth-child(3n + 1) { clear: none; } 
    @include isolate-grid(9,18); 
    &:nth-child(odd):last-child { margin-left: space(9,18)/2; } 
} 

space(9,18)的剩餘空間 - 9列，再加上一個額外的排水溝，如果你有偶數列的話，那就更簡單了。假設餘下的是8：

$position: $remainder/2; 
&:nth-child(odd):last-child { @include isolate($position,18); }