還記得五子棋棋盤嗎？
> 我認為：grid布局就是將需要分割排列的容器變成一張由一個個小格子組成的棋盤，從左上角開始以（1，1）為原點向右、向下延伸，在grid布局中，你最常見的單詞便是row和column，分別代表行與列，可以將其想象為一個特殊的二維坐標軸的橫（row）、縱（column）坐標
## 1.父元素 網格容器grid
想使用grid布局的前提便是定義：
~~~
.container {
display: grid | inline-grid | subgrid;
}
~~~
* :grid 會生成一個塊級網格
* :inline-grid 會生成一個內聯網格
* :subgrid 如果你的網格容器本身是另一個網格的網格項（即嵌套網格），你可以使用這個屬性來表示：你希望它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。
## 2.grid-template
**使用空格分隔的值列表，用來定義網格的列和行。這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。**
~~~
grid-template: 100px 100px 100px / 100px 100px 100px ;
// 簡寫方式，用于規定初始單個網格的行列數量與行列高低
~~~
例：
~~~
.container {
display: grid;
grid-template: 100px 100px 100px / 100px 100px 100px ;
}
// 這將會使container分割成3行3列，每個柵格的大小都為100px*100px；
~~~
### 2.1grid-template-columns
~~~
// 用于規定容器內有多少列且每列有多寬
.container {
display: grid;
grid-template-columns: 100px 200px 100px 100px;
}
~~~
### 2.2grid-template-rows
~~~
// 用于規定容器內有多少行且每行有多高
.container {
display: grid;
grid-template-rows: 100px 200px 100px 100px;
}
~~~
## 3.grid-gap
**指定網格線(grid lines)的大小。你可以把它想象為設置列/行之間間距的寬度。**
> 只能在 列/行 之間創建間距，網格外部邊緣不會有這個間距。
~~~
// 簡寫方式
.container{
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px 15px;
}
~~~
### 3.1grid-column-gap
**列與列之間的間距**
### 3.2grid-row-gap
**行與行之間的間距**
## 4.grid-column、grid-row
用于設置格子的大小與位置
### 4.1grid-column-start,grid-column-end
~~~
格子的列寬（從start到end） start和and均為正整數
可以簡寫為 grid-column: start / end
~~~
### 4.2grid-row-start，grid-row-end
~~~
格子的行高（從start到end） start和and均為正整數
可以簡寫為 grid-row: start / end
~~~
> **當grid-column與grid-row只傳一個值時代表默認寬高均為一個單位，而傳遞的那個值會作為定位使用，若傳遞兩個值時長寬的大小等于end-start**
## 5.grid自適應布局
將大小單位改為 fr即可實現
~~~
.container {
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
height: 999px;
}
// 這將會使container分割成3行3列，每個柵格的大小都為1/3的總寬*333px；
~~~
