Wie verpacke ich Elemente so, dass in der letzten Zeile immer mindestens zwei Elemente vorhanden sind?

Question

Bildfrage

Mein Kunde möchte natürlich Fahrzeuge responsiv auf seiner Website einstellen. Aber alle bekannten Techniken (Flex, Grid) wickeln das letzte Element in die nächste Zeile ein.

Was ich mit Bildern versuche

Aber für einen Helden ist das extrem hässlich. Kunden wollen:

• Maximal 5 Artikel pro Zeile
• Mindestens 2 Artikel pro Zeile

Der schwierige Teil besteht darin, dass die Anzahl der Artikel dynamisch sein muss. Normalerweise zwischen 4 und 6 Autos

Ich weiß, dass ich die letzten beiden Artikel so auswählen kann

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

Aber ich kann sie nicht zum Einpacken zwingen. Irgendwelche Ideen?

Answer 1

原来我必须事先获取项目的数量，并将类注入到列表中来控制显示

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