如何在图库中将最后一行不均匀列表项居中

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

在桌面屏幕尺寸上，我得到一个 3x3 的图像网格：

在中型屏幕上，我选择了 2 列显示，这会导致底部最后一行的九个列表项中的一个：

那么将最后一行的不均匀项目居中是否有意义（此时最后一个项目正在填充并粘在左列）？使用 Susy 和/或纯 CSS 很容易做到这一点吗？任何建议和灵感都将不胜感激，因为在这种情况下，我有点迷茫并且不知道如何对待那件事。 :s 最好的问候拉尔夫

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) 是剩余空间 - 18 列中的 9 列加上一个额外的装订线。如果剩余的列数为偶数，那会更简单。假设余数是 8：

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