How to wrap items to always have min 2 items in the last row?

Question

The problem with pictures

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

What I try to do with pictures

But in a hero it's extremely ugly. The client want:

• Maximum 5 items per row
• Minimum 2 items per row

The tricky part is the number of item must be dynamic. Usually between 4 to 6 vehicules

I know I can select 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 I had to get the number of items beforehand 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;                   
        }
    }
}