Comment emballer les éléments pour toujours avoir au moins 2 éléments sur la dernière ligne ?

Question

Question image

Mon client souhaite bien sûr référencer des véhicules sur son site internet de manière responsive. Mais toutes les techniques connues (flex, grille) placent le dernier élément dans la ligne suivante.

Ce que j'essaie de faire avec les images

Mais pour un héros, c'est extrêmement moche. Les clients veulent :

• Maximum 5 articles par ligne
• Au moins 2 articles par ligne

La partie délicate est que le nombre d'éléments doit être dynamique. Généralement entre 4 et 6 voitures

Je sais que je peux choisir les deux derniers articles comme celui-ci

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

Mais je ne peux pas les forcer à s'emballer. Des idées?

Answer 1

Il s'avère que je dois obtenir le nombre d'éléments à l'avance et injecter la classe dans la liste pour contrôler l'affichage

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