如何阻止我的CSS網格列使用minmax（）增長？

Question

我正在使用CSS網格來實現卡網格佈局。

但我不知道如何調整minmax()語句來處理沒有足夠的項目來填充行但仍然需要它們看起來像卡的用例！

如果我用一個靜態100px替換最大1fr值，或者我使用小數0.25fr，它會在較小的介質尺寸下打亂縮放比例。

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
    grid-column-gap: 17px; 
 
    grid-row-gap: 25.5px; 
 
    padding-bottom: 25.5px; 
 
} 
 
.card { 
 
    background-color: #000; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</div>

然後，如果只有幾個項目

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
    grid-column-gap: 17px; 
 
    grid-row-gap: 25.5px; 
 
    padding-bottom: 25.5px; 
 
} 
 
.card { 
 
    background-color: #000; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</div>

Answer 1

的關鍵是使用auto-fill而不是auto-fit。

---

當repeat()功能設定爲auto-fit或auto-fill，網格容器創建儘可能多的網格軌道（列/行）儘可能而不溢出容器。

（請記住，當容器創建網格時，網格物品的數量是無關緊要的，容器只是按照指示佈置列和行，這會創建網格單元格，而不會查看是否存在項目來填充它們）。

隨着auto-fit，當沒有足夠的網格項來填充創建的軌道數時，這些空軌道會摺疊。

以您的代碼爲例，當沒有足夠的網格項填充行中的所有列時，這些空列將摺疊。空列使用的空間成爲空閒空間，然後均勻分佈在現有項目中。通過吸收可用空間，項目會增長以填充整行。

與auto-fill，除了空的曲目沒有摺疊，所有內容都與auto-fit相同。他們被保留。基本上，網格佈局保持固定，有或沒有物品。

這是auto-fill和auto-fit之間的唯一區別。

下面是從規範的更多：搜索附加https://www.w3.org/TR/css3-grid-layout/#auto-repeat

^{關鍵字：之間自動填充自動調整}