htmlcssscss-lint

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


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:

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?


Solution

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