你真的瞭解Grid佈局嗎？
Grid網格佈局
概述：Grid將容器劃分為一個個網格，通過任意組合不同的網格，做出你想想要的佈局
Grid與flex佈局相似，將整個Grid分為了容器與子項（格子）
Grid容器的三個重要的概念：
- 行和列
- 單元格
- 網格線
行和列
行和列的概念和柵格系統的的概念相似
單元格在水平方向排成一路為一行
單元格在豎直方向上拍成一路為一列
單元格
作為容器的最小單位，Grid網格由一個個單元格組成
網格線
用來隔開單元格的交叉線。網格線將每一行、每一列的單元格分割成全封閉的矩形
每行、每列網格線的數量是當前行數和列數加一；全封閉嘛
網格線也是控制單元格大小的因素之一；
Grid容器屬性(常用的)
1.指定一個Grid容器
display屬性值：
grid:指定一個元素採用網格佈局，預設情況下容器都是塊級元素獨佔一行
inline-grid:指定為行內Grid
2.設定Grid行數和列數
grid-template-rows: 指定行數
grid-template-columns: 指定列數
先做一個3 x 3的網格
.container{
width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
background-color: #123456;
margin: 200px;
}
.container div{
width: 100px;
height: 100px;
background-clip: content-box;
padding: 5px;
border: 1px solid #fff;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
還可以使用結合屬性：grid-template
grid-template: 100px 100px 100px/100px 100px 100px;
新單位fr
fraction 的縮寫，意為"片段" 。可以理解為當前單元格所佔該行/列的比例、
上述程式碼可以改為
grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
如果行數或者列數特別多的情況下，這樣寫就顯得特別的繁瑣；
於是乎就有了一個repeat( )函式
grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr);
repeat()
第一個引數是設定行/列數
第二個引數是設定每一行/列所佔的當前容器的份額
第二個引數可以填多個值
grid-template-rows: repeat(3,1fr ); grid-template-columns: repeat(3,1fr 50px);
先看結果：
理解：
容器被分為3列，每一列又被分成了 1fr 和50px，也就是說被分為了6列
內容區為1的元素佔了 1fr+50px中的 1fr
內容區為2的元素佔了 1fr+50px中的 50px
那麼問題來了，為什麼6是完整的？
其實每一個div都是完整的，只不過2有一半被3遮住了而已
6有一半超出了grid容器
為什麼 3 5 9會遮住前一個div呢？
這就要提到網格線的作用了，網格線的作用不僅僅是分割每一個單元格
在分割單元格的同時也規定了每個單一格的水平和垂直方向上的起始位置和結束位置
3的其實位置就是在1fr+50px這裡，也就是第二條列網線的位置，結束位置是第三條網格線
審查元素能很好的看的網格線的情況和單元格的分佈
minmax( ) 和 auto
auto 單元格寬度/高度自適應
grid-template-rows: repeat(3,1fr ); grid-template-columns: 50px auto 50px;
第二列多餘的寬會隨這Grip容器的變化而改變
第三列網格線會改變
minmax( ) 單元格寬度/高度在（min，max）範圍內
grid-template-rows: repeat(3,1fr ); grid-template-columns: 50px minmax(120px,1fr) 50px;
這裡的1fr表示剩餘的位置。因為沒有別的列佔剩餘空間。
如果最大值部分超出grip容器的容量，只會分配最大剩餘容量
3.grip-gap：設定行/列直接的間隙
grip-gap：5px 5px 行間隙5 列間隙5
簡寫：grip-gap：5px
你也可以分開寫兩個屬性
grid-column-gap：5px;
grid-row-gap：5px;
4.grid-template-areas：在網格內指定區域
改屬性必須配合子項中的grid-area來使用
grid-area：用來規定區域的名字
你可把grid-area當成畫布，把grid-area所指定的區域當作畫塊
通過畫塊的拼接來獲取想要的佈局；
你可以輕輕鬆鬆的做出如下佈局（而且大小可以自適應）
程式碼如下：
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template: repeat(4,1fr)/repeat(4,1fr);
grid-template-areas: "hl m m hr"
"hl m m hr"
"al al ar ar "
"f f f f ";
background: #eee;
grid-gap: .7em
}
.container .main{
grid-area: m;
background-color: #f1c40f
}
.container .asideL{
grid-area: al;
background-color: #4ff10f
}
.container .asideR{
grid-area: ar;
background-color: #0ff1cb
}
.container .headerL{
grid-area: hl;
background-color: #0f26f1
}
.container .headerR{
grid-area: hr;
background-color: #9e0ff1
}
.container .footer{
grid-area: f;
background-color: #f10f1a
}
<div class="container"> <div class="main"></div> <div class="headerL"></div> <div class="headerR"></div> <div class="asideL"></div> <div class="asideR"></div> <div class="footer"></div> </div>
突然感覺頁面佈局居然如此簡單
注意：在grid-template-areas內所指定的命名區域必須是矩形，不然瀏覽器不渲染
grid-template：是grid-template-columns、grid-template-rows和grid-template-areas
5.grid-auto-flow：設定單元格排列的方向。
屬性值：
row： 從水平方向自左向右排列（預設）
column：從豎直方向自上向下排列
row dense：從水平方向自左向右排列，自動填補空格，儘可能排滿
column dense：從豎直方向自上向下排列，儘可能排滿
6.justify-items/align-items：設定單元格內的水平方向/垂直方向對其方式
屬性值：
start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，佔滿單元格的整個寬度（預設值）
place-items是justify-items與align-items的合併屬性
7.justify-content/align-content：設定grid網格內所有單元格水平方向/垂直方向對其方式
屬性值：
start：對齊容器的起始邊框。
end：對齊容器的結束邊框。
center：容器內部居中。
stretch：專案大小沒有指定時，拉伸佔據整個網格容器。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。
space-between：專案與專案的間隔相等，專案與容器邊框之間沒有間隔。
space-evenly：專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。
place-content是align-content和justify-content的合併屬性。
Grid專案屬性(常用的)
1.grid-column/grid-row：根據網格線來指定單元格位置
background-color: red; grid-column: 2 / 3; grid-row: 1 / 2;
這裡的意思是該單元格
X方向上所佔的位置是第二根網格線到第三根網格線
Y方向上所佔的位置是第一根網格線到第三根網格線
2. grid-area: 指定單元格在那個區域
grid-area:是grid-column/grid-row的合成屬性
grid-area: 1/2/2/3;
也可以指定是哪個已命名的區域，配個grid-template-areas使用
3. justify-self/align-self：單元格內容對齊方式
start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，佔滿單元格的整個寬度（預設值）。
Grid網格相容問題：
如果對內容有疑問，歡迎交流討論
參考連結：
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://www.jianshu.com/p/21fc2c091b98
&n