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

Question

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?

Please post your actual attempt at this as a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Explain what issues you are facing with your implementation of the desired behavior so we can help you debug and improve it — Miss Skooter, Apr 13 '23 at 14:07
Without a reproducible example on Stackblitz or your code it's not easy to understand what you already tried but maybe you can accomplish the same result by code instea of css, getting the last 2 elements always on a separate div. — jcobo1, Apr 13 '23 at 17:31

score 0 · Accepted Answer · answered Apr 17 '23 at 20:45

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

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

1 Answers1