[TOC]
## Grid布局一覽
大概看一下就好，下面我們會從頭講起。
>其中內容部分的高度也可以不用`calc()`計算出的結果來表示而是使用`auto`，只不過這樣的話我們需要將`.container`容器的height設置為100%。
## 網格系統
### 生成網格系統：display:gird
當給一個容器（我們稱這樣的容器為`grid-container`）設置為`display:gird`時其內部的**直接子元素**都會
轉換為`grid-item`。
grid-item類似于將一個元素block化，參考最初的那個栗子中的span元素。如果一個元素已經是block元素并且它自身帶有margin等樣式，那么這些樣式會被保留。
### "畫"一個網格出來： grid-template-columns/rows
> template template template模擬三遍關鍵字，嗯。。名字真怪
So以上就是一個3x3的網格，它的每個格子都是邊長為100px的正方形，嗯，對照右邊的代碼你應該可以意會到怎么回事。
值得一說的是這個3x3的網格是由4條**列網格線**和4條**行網格線**形成的。并且我們能為每條網格線取一個名字
```
grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows:[r1] 100px [r2] 100px [r3] 100px [r4];
```
嗯，取名字有什么用呢?莫方!我們馬上講到。
### 圈地為王（"畫"一個元素）：grid-column/row
>[warning] 有些姓馬的同學看到這一節標題肯定納悶，哎呀哎呀，這API長得不是和上面那一節的API一樣嗎？一樣個鬼咧，這個一對沒有template字樣，并且column/row都不帶s
我們都知道一個矩形由4條邊組成，嗯，記得我們上一節中給每一條網格線取了個名字嗎？嘿，是不是突然明白了什么。
注意，`grid-column:c1/c3`中的`/`并不是除號，而是表示**到/To**的意思，它表示你在這張網格里放了一個元素，這個元素的寬度是c1列網格線到c3列網格線之間的距離。
除了上面這種表示一個元素寬高的方式，我們還能直接使用數字
```
grid-column: 1/3; //第一條網格線到第三條網格線的距離
grid-row:2/3;
```
#### 可視化布局：grid-template-areas
又或則我們可以把一個元素(grid-item)實際的樣式大小交給它的父容器(grid-container)來決定。
不過我們需要先給這個grid-item取個名字
```
.item1{
grid-area:item1;
}
```
接著
>**注：** 一個`.`代表一個空的網格單元，另外grid-tempalte-areas的值只在最后一行有`;`
嗯，如果這一節的栗子看懂了（怎么能，怎么能！看不懂！），那么最開始的布局的例子想必小伙伴現在也能看懂啦~
至此你已經掌握住了Grid中最重要的部分，其余都是細節都是細節啦（嗯，只說了兩遍），是不是很簡單~(づ￣ 3￣)づ
## 給網格設置gap
要聲明的一點是，`grid-gap`的值就像`padding`什么的一樣是一個復合值（`padding-left/top`），只設置一個是表示橫縱向gap值相等。
Grid相較于Flex最大的一點不同之處就在于Grid是一個二維布局系統（Flex是一維的），什么是二維？什么是一維呢？
## 富余空間管理
和Flex一樣分為父容器的富余空間的管理和子item的富余空間的管理。
gird-container富余空間管理API
- justify-content
- align-content
gird-item富余空間管理API
- justify-items
- align-items
同樣的`justify`是負責行向富余空間的管理，`align`是負責縱向的富余空間的管理。
并且不論是`justify`還是`align`屬性，不論是父容器(`grid-container`)還是`grid-item`，它們各自的justify和align屬性**的值**都存在`start/end/center/stretch`四個選項。
grid-container和grid-item之間唯一需要注意的是，grid-container的justify和align屬性還存在**3個**grid-item元素所不具有的屬性值：`space-around/space-between/space-evenly`
>[danger] **注意：** justify-content/align-content/justify-items/align-items 都是grid-container下的css屬性，雖然justify-items/align-items是針對grid-item的富余空間管理，但請注意，`-items`是有一個`s`的，這意味著這個css屬性是對所有grid-item生效的，如果你要單獨對某個grid-item進行設置，請使用`grid-self`
另外我們若只在grid-template-columns中設置grid-line，也能達到網格項自適應網格容器的效果（類似于`justify-content:stretch`）
## 越界處理與grid-auto-columns
如果你“畫”的元素的長寬超過了你“畫”的網格的網格線行數或列數，Grid系統會自動為你補充上。但網格軌道的寬度是否滿足你的需求需要你自己去留意。
## 自動放置與grid-auto-flow
當你既不在一個grid-container中用`grid-template-areas`給一個grid-item設置長寬又不在grid-item內部用`grid-column/row`自己去設置（并且不設置自己的名字），那么，這個grid-item會被當做**一個網格單元格**來繪制，并按照橫向或縱向的方式依次放置進閑置的網格空間。
其余值：
- column：從上往下放，到底了再從另一列（從左往右）開始再從上往下繼續放
- dense T_T沒發現和row有什么區別
## 其它現象
### grid-item數>grid-cell數
當采用`grid-template-areas`的渲染方式時，多余的item會被截取掉
當采用`grid-auto-flow`自動放置的時候
設置為column的時候
> **注意：** 此時請不要給item取名，因為這樣會產生不可控的布局現象
### 行級元素設置為grid時
我們可以發現當一個行級元素被設置為`display:grid`時，它會獨占一行
### grid-container并不會轉換為border-box
### grid-item會轉換為margin-box
對的，你沒有看錯，是`margin-box`，比`border-box`還牛逼！
---
