[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`還牛逼!

---