【Css】grid裏 auto-fill和auto-fit的區別

display: grid;
grid-gap: 12px 10px;
// 這裏auto-fill和auto-fit的區別，主要是影響到元素個數比較少的狀況
grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));

auto-fill的效果以下：

auto-fit的效果以下：

grid中auto-fit和auto-fill的區別

    auto-fill:在軌道重複過程當中，儘量多的根據元素建立軌道，若是建立的軌道數量是小數好比6.5，那麼0.5就被稱爲剩餘空間，剩餘的空間不夠一個軌道了，就至關於每一個軌道1fr進行分配這個0.5的剩餘空間，沒有元素填充的空軌道不會摺疊依然保留（至關於留了空白）。

    auto-fit:在軌道重複過程當中，儘量多的根據元素建立軌道，並均分不到一個軌道的剩餘空間。軌道分配完之後若是軌道中沒有元素則將全部沒有元素填充的空軌道摺疊爲0，即把沒有元素填充的空軌道全被分配給有元素的軌道（至關於有元素填充的軌道所有爲1fr）。最後沒有空軌道剩餘。

    last：auto-fill和auto-fit一開始作的事情是同樣的就是儘量的分配軌道數量，區別在於後面空軌道是否會摺疊爲0。auto-fill不折疊空軌道，auto-fit摺疊空軌道。