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

Question

我尝试让我的玩具项目在当下响应，我遇到了一个问题，我不确定是否有可能解决，如果这个修复有意义的话。目前，我的Scss代码如下所示（使用Susy和Breakpoint）：

.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)

$position: $remainder / 2; &:nth-child(odd):last-child { @include isolate($position,18); } 是剩下的空间 - 9列加上18个额外的排水沟。如果剩下偶数列，那就更简单了。让我们说剩下的就是8：

{{1}}