使用flex布局的痛點

如果使用justify-content: space-between;讓子元素兩端對齊，自動分配中間間距，假設(shè)一行4個，如果每一行都是4的倍數(shù)那沒任何問題，但如果最后一行是2、3個的時候就會出現(xiàn)下面的狀況：

/* flex布局 兩端對齊 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;

如何想讓最后一行左對齊是有辦法的，大家可以自行去搜索辦法，能實現(xiàn)但是操作起來有些麻煩，但是如果這種布局使用grid布局的話，就會變的非常容易。

同樣的布局，將flex改為grid

/* grid布局 兩端對齊,最后一行左對齊*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;   

解釋一下上面的代碼：

• display：grid 是轉(zhuǎn)為網(wǎng)格布局，這個是必須的
• grid-template-columns：1fr | px 這是將網(wǎng)格分為幾列，1fr是自適配單位，可以當(dāng)成柵格
• gap:30px 這是網(wǎng)格四周的間隔
  注意：這三個屬性是給父容器添加的，子元素，可以不用設(shè)置寬度，也不用設(shè)置margin間距即可完成如下布局。
  
  看，上面的grip布局，最后一行不是4的倍數(shù)，但是可以左對齊，不會像flex布局一樣的bug。

深入了解一下grid-template-columns屬性

• grid-template-columns: 1fr;（獨占一行）
• grid-template-columns: 1fr 1fr;（一行分為兩列）
  
• grid-template-columns: 1fr 200px 1fr;（中間固定200px，兩邊自動平均分配）
  
• grid-template-columns: 1fr 1fr 1fr 1fr 1fr;如果5列的值相同，可以使用repeat()函數(shù)，grid-template-columns: repeat(5,1fr)當(dāng)然將1fr緩存固定的px尺寸也可以。
  
• grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 這種寫法可以用來做響應(yīng)式布局，auto-fill主軸上指定的寬度或者重復(fù)次數(shù)是最大可能的正整數(shù)，minmax最小值255px、最大值1fr代表剩余空間的比例。
  
  注意：實現(xiàn)這種響應(yīng)式布局，一定要注意父容器不能使用固定寬度，可以將父容器改為如：80%，這樣就能根據(jù)屏幕的寬度，自動展示一行展示幾個了。

grid-row和grid-column可以控制某個元素占領(lǐng)幾份

.layout .box1{grid-row: 1/3;grid-column: 1/3;
}

以grid-row行為例，從第幾列開始 / 第幾列+想占幾個；