如何包裝項目以始終在最後一行至少包含 2 個項目？

Question

圖片問題

我的客戶當然希望以響應式方式在他的網站上列出車輛。但所有已知的技術（flex、grid）都將最後一個項目包裝到下一行。

我嘗試用圖片做什麼

但對於英雄來說，這是極其醜陋的。客戶想要：

• 每行最多 5 項
• 每行至少 2 項

棘手的部分是項目的數量必須動態。通常在 4 至 6 輛車之間

我知道我可以像這樣選擇最後兩項

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

但我不能強迫它們換行。有什麼想法嗎？

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