How to wrap items to always have at least 2 items on the last row?

Question

Picture problem

My client of course wants to list vehicles on his website in a responsive manner. But all known techniques (flex, grid) wrap the last item to the next row.

What I try to do with pictures

But for a hero, this is extremely ugly. Customer wants:

• Maximum 5 items per line
• At least 2 items per line

The tricky part is that the number of items must be dynamic. Usually between 4 and 6 cars

I know I can choose the last two items like this

.item:nth-last-child(-n+2) {
  order: 2; /* set order to 2 for the last two items */
}

But I can't force them to wrap. Any ideas?

Answer 1

It turns out that I have to get the number of items in advance and inject the class into the list to control the display

<ul class="{{ 'SENARIO_' + numberOfItem + '_ITEMS' }}">

...

.SENARIO_4_ITEMS {
    .container {
        width: 268px;
    }
    @media #{$larger-down} {
        a {
            flex-basis: 50%;
            display: flex;
            justify-content: center;
            .container {
                width: 268px;                   
            }
        }
    }
} 
.SENARIO_5_ITEMS {
    .container {
        width: 270px;
    }
    @media #{$xxlarge-down} {
        a {
            flex-basis: 33%;
            display: flex;
            justify-content: center;
            .container {
                width: 300px;                   
            }
        }
    }
}
.SENARIO_6_ITEMS {
    a {
        flex-basis: 33%;
        display: flex;
        justify-content: center;
        .container {
            width: 300px;                   
        }
    }
    @media #{$xxlarge-down} {
        .container {
            width: 300px;                   
        }
    }
}