grid布局： 基於網格的2維布局方法
1：display: grid | inline-grid | subgrid
作用：啟用網格grid容器
grid：定義一個塊級的網格容器
inline-grid：定義一個內聯的網格容器
subgrid：定義一個繼承其父級網格容器的行和列的大小的網格容器，它是其父級網格容器的一個子項。
2:網格系統的屬性
（1）：grid-template-columns/grid-template-rows
grid-template-columns 列寬(值得個數決定了列數)
grid-template-rows 行高（值得個數決定了行數）
設置方法：
a:
(創建三行三列的網格結構，值也可以設置auto自動分配剩余)
grid-template-columns:33.33% 33.33% 33.33%
grid-template-rows:33.33% 33.33% 33.33%
b:
repeat(3,33.33%)方法設置相同的值
grid-template-columns:repeat(3,33.33%)
grid-template-rows:repeat(3,33.33%)
c:
可以添加名稱：
grid-template-columns:[line1] 25% [line2] auto [line3] 25% [line4]
grid-template-rows:[row1] 25% [row2] auto [row3] 25% [row4]
如圖
d:
1fr 每個網格所占份數
grid-template-columns:1fr 1fr 1fr
grid-template-rows:1fr 1fr 1fr
（2）：grid-template-areas
作用：grid-template-areas可以配合grid-area定義一個顯式的網格區域。grid-template-areas定義網格區域，然后使用grid-area調用聲明好的網格區域名稱來放置對應的網格項目。 .代表一個空的網格單元
例子：
<section>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</section>
section{
display:grid;
background:pink;
grid-template-columns:repeat(4,1fr);
grid-template-rows:(3,1fr);
grid-template-areas: "header header header header"
"nav . . aside"
"footer footer footer footer"
}
.wrap1{
grid-area: header;
background:#f00;
}
.wrap2{
grid-area: nav;
background:#dd0;
}
.wrap3{
grid-area: aside;
background:#0dd;
}
.wrap4{
grid-area: footer;
background:#000;
}
效果如圖：
（3）：grid-column-gap/grid-row-gap/grid-gap
作用：指定網格線的大小，也可以說是網格子項之間的間距
grid-gap是grid-column-gap和grid-row-gap的簡稱
eg:
grid-gap:10px
圖示：
（4）：justify-items/align-items
屬性值：
start：內容和網格區域的左邊對齊
end：內容和網格區域的右邊對齊
center：內容和網格區域的中間對齊
stretch：填充整個網格區域的寬度（默認值）
justify-items：讓網格子項的內容和列軸對齊
align-items：讓網格子項的內容和行軸對齊，這個值對容器里面的所有網格子項都有用
eg:
justify-items: center;
align-items:center;
圖示：
（4）justify-content/align-content
屬性值
start:左對齊
end：右對齊
center：居中對齊
stretch：填充網格容器
space-around：在每個網格子項中間放置均等的空間，在始末兩端只有一半大小
space-between：兩邊對齊，在每個網格子項中間放置均等的空間，在始末兩端沒有空間
space-evenly：網格間隔相等，包括始末兩端
說明：當網格子項非彈性單位，例如每個格子的寬是px單位，控制網格子項在網格系統里面的對齊方式。
justify-content 列網格線對齊
align-content 行網格線對齊
（5）grid-auto-columns/grid-auto-rows
作用：設置隱式網格軌道的列寬和行高。
隱式網格：當你定位網格項超出網格容器范圍時，將自動創建隱式網格軌道。
怎么創建隱式網格：接觸兩個新屬性（放在網格元素上） 》
grid-column / grid-row
eg：
grid-column ：2/3 把當前的元素放在第2列網格線開始到第三列網格線之間。
gird-row：1/2 把當前元素放在第1行網格線開始到第2行網格線之間。
代碼示例：
<section>
<div >1</div>
<div >2</div>
<div >3</div>
</section>
section{
background:pink;
display:grid;
}
div{
border:1px solid #d00;
}
.con1{
grid-column: 2/3;
grid-row: 2/3
}
.con2{
grid-column: 6/7;
grid-row: 1/2;
}
.con3{
grid-column: 6/7;
grid-row:2/3;
}
注：以上案例則創建了一個2行6列的網格系統。分別把網格內的元素放在網格不同的位置。
（位置：類似幾行幾列 grid-column控制放在第幾列，grid-row控制放在第幾行）
grid-auto-columns/grid-auto-rows則是控制自動創建出來的網格的列寬和行高。
eg:
grid-auto-columns: 60px;
grid-auto-rows:100px;
（5）grid-auto-flow:
作用：當網格系統中沒有設置網格內的元素固定在某個位置的時候，grid-auto-flow可以自動去排列位置：
屬性值：
row 按照行橫向進行排列
column 按照列縱向進行排列
row dense 在行內按照元素的先后順序進行排列
column dense 在列內按照元素的先后順序排列
eg:
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</section>
div:nth-child(2){
grid-column:4/5;
grid-row:2/3;
}
注:給第2個元素設置了位置。其他元素的排列按照grid-auto-flow設置進行排列。
（6）：justify-self/align-self
和justify-items/align-items的作用一樣。區別：justify-items/align-items控制的是整個網格系統內的所用元素的對齊方式。而justify-self/align-self則是添加在網格系統中的某一個元素上面，僅對當前的元素起作用。