Grid佈局解決列等分問題

實際需求：

通常我們一般會選擇用flex佈局來實現:

{
	display: flex;
	flex-direction: row;
	justify-content : space-between;
}

但是這樣的方式會導致最後一行不沾滿的情況下排列出現問題，像這樣：

其實我們是希望其他行等分，最後一行左對齊的效果的，如果一定要用flex來做，就必須寫佔位的div，讓最後一行沾滿，讓每一行的個數相等，達到等分效果。但是在螢幕自適應，內容大小不確定且不固定一行顯示多少個的情況下，這個邏輯就顯得相對複雜，所以最後考慮用grid佈局來實現。

之前有分享過grid的一些基礎用法，這次的重點也不在基礎上，所以直接跳過，直接上進入主題
grid佈局基礎連結

首先要普及一下demo用到的一些概念

1、等分(fr)單位

Grid 帶來了一個全新的值，稱為等分單位，即 fr 。它允許你將容器可用空間分成你想要的多個等分空間。

{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

結果：

2、repeat()
可以建立重複的網格軌道。這個適用於建立相等尺寸的網格專案和多個網格專案。repeat()接受兩個引數：第一個引數定義網格軌道應該重複的次數，第二個引數定義每個軌道的尺寸
所以下面兩個寫法結果相等

{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

效果和上個例子一樣

3、auto-fit （自適應）
但是我們不希望固定行的次數，希望自動填充次數，充滿外面的容器，可以用auto-fill或者auto-fit

{
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
}

結果：

現在這個網格已經可以通過容器的寬度來改變列的數量。但是貌似還不能完全滿足需求
它只是儘可能的把100px寬的盒子往一列裡面塞，我們永遠得不到我們想要的靈活性，因為它們很少會加起來正好等於容器的寬度，所以右邊經常會留白。

4、minmax()
可以通過minmax()函式來建立網格軌道的最小或最大尺寸。
minmax()函式接受兩個引數：第一個引數定義網格軌道的最小值，第二個引數定義網格軌道的最大值。可以接受任何長度值，也接受auto值。auto值允許網格軌道基於內容的尺寸拉伸或擠壓
所以在程式碼上改成：

 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

所以現在列的寬度至少 200px 。但是，如果有更多的可用空間，網格將分配給每個列，因為列的值變成了一個等分單位 1fr ，而不是 200px

專案實際效果：

雖然css網格佈局能輕鬆做到平均分配內容，但是實際實用上還是會有部分問題，比如要考慮瀏覽器的相容，還有當只有一行資料沒有參考行的時候，需要另外寫相容

使用者和瀏覽器支援
全球佔85%網站流量的瀏覽器支援
!(https://img-blog.csdnimg.cn/20181115224240488.png