How to center the last line of uneven list items in a gallery

Question

I try to make my toy project responsive at the moment and i ran into one issue i am unsure if it is possible to solve and if that fix makes sense at all. At the moment my Scss code looks like the following (using Susy and 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);
            }
        }
    }
}

On desktop screensizes i get a 3x3 image grid:

On a midsized screen i chose a 2 column display which leads to a single list item out of nine in the last line at the bottom:

So would it make sense to center the uneven item of the last line (at the moment the last item is filling and stuck to the left column)? Would it be easy to accomplish that with Susy and or plain CSS? Any suggestions and inspiration in which direction to head and try would be appreciated cuz in that case i am a bit lost and out of ideas how to treat that thing. :s Best regards Ralf

Answer 1

All you need to do is re-position any :last-child that is also :nth-child(odd) - moving it from the left, pushing it half the remaining distance:

@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) is the remaining space - 9 columns plus an extra gutter, out of 18. If you had an even number of columns remaining, it would be even simpler. Let's say the remainder was 8:

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