# CSS-Grid
###### tags: `HTML-CSS`
## 前言
### (一) . Grid也有分內外容器

## 一 . 外容器
### (一) . display : grid
1. 功用 ： 似flex的功能，需要預設才可以使用接下來的功能。
2. 語法 ：

.wrapper{
  display:grid;
}

### (二) . grid-template-columns
1. 功用 ： 定義grid要有多少個col，可以**控制cell的寬度**。
- 超出個col數，自動換行。
- 可以只設定col，grid會自動增加擴展成多列。
2. 語法 ：
- auto : 自動依照內容伸縮寬度。
- fr : 依照比重分配剩於空間，**注意grid本身會填滿father的寬**。
- 其他單位 ： 固定該col要的寬度。

.wrapper{
  display:grid;
  grid-template-columns: auto auto auto。
}


### (三) . grid-template-rows
1. 功用 ： 定義grid要有多少row，可以**控制cell高度**。
- 超出個row數，直接爆掉。
- 只設定row，單row只可以裝一個cell。
2. 語法 ：
- auto : 自動依照內容伸縮寬度。
- fr : 依照比重分配剩於空間，**注意grid本身不會填滿father的高**。
- 其他單位 ： 固定該row要的寬度。

.wrapper{
  display:grid;
  grid-template-rows: auto auto auto。
}

### (四) . gap、row-gap、column-gap
1. 功用 ： 設定col和row之間的空格。
- gap-row : row之間的空格。
- gap-column : column之間的空格。
2. 語法 ： 可以用```gap```屬性一次設定。

.wrapper{
  display:grid;
  gap: 2px 3px;
  /* gap-row: 2px */
  /* gap-column: 2px */
}

### 小結論一 . cell的大小控制
- 若我們今天設定了兩個class:

.Grid{
  display: grid;
  grid-template-columns : 1fr 1fr 1fr;
  grid-template-rows :  150px 150px;
}
.item{
  width:30%;
}


1. 外容器控制 ：
- 本身的大小和寬度。
- 內元件的大小(cell)。
2. 內元素控制 ：
- 本身的大小。
- 所以，在內元件沒有設定大小時，會繼承cell的設定。

### (五) . justify-items:
1. 功用 ： 將cell內的元素由col方向排列。
- 在內元素直接繼承cell的設定下，基本上沒有什麼用。

2. 語法 ： 設定```justify-items```屬性。
- start ： 向頭部靠齊。
- end ： 向尾部靠齊。
- center ： 向中間對其。
- stretch : 填滿父元素。

.wrapper{
  display:grid;
  justify-items : start;
  
}

### (六) . align-items
1. 功用 ： 將cell內的元素由row方向排列。
- 在內元素直接繼承cell的設定下，基本上沒有什麼用。

2. 語法 ： 設定```align-items```屬性。
- start ： 向頭部靠齊。
- end ： 向尾部靠齊。
- center ： 向中間對其。
- stretch : 填滿父元素。

.wrapper{
  display:grid;
  align-items : start;
  
}

### (七) . justify-content
1. 功用 ： 在grid實際的size小於grid設定的size時，grid的排列方法。
- 常常發生在任何non-flex的形況。
- 例如 ：
- 你設定了grid本身的大小為1000px。
- 又設定cell的大小為200px。
- 而一個row只有3個cell時。

2. 語法 ： 設定```justify-content```屬性。
- start ： 向頭部靠齊。
- end ： 向尾部靠齊。
- center ： 向中間對其。
- stretch : 填滿父元素。
- space-between ： 頭尾不加入空白，在各個cell間加入。
- space-around ： 頭尾加入半個空白，也在各個cell間加入。。

.wrapper{
  display:grid;
  justify-content: start;
  
}

### (八) . align-content
1. 功用 ： 在grid實際的size小於grid設定的size時，grid的排列方法。
- 常常發生在任何non-flex的形況。
- 例如 ：
- 你設定了grid本身的大小為1000px。
- 又設定cell的大小為200px。
- 而一個col只有3個cell時。
2. 語法 ： 設定```align-content```屬性。
- start ： 向頭部靠齊。
- end ： 向尾部靠齊。
- center ： 向中間對其。
- stretch : 填滿父元素。
- space-between ： 頭尾不加入空白，在各個cell間加入。
- space-around ： 頭尾加入半個空白，也在各個cell間加入。。

.wrapper{
  display:grid;
  align-content : start;
  
}

### (九) . grid-auto-rows
1. 功用 ： 當grid由row方向爆開時，應該要有的row寬度。
- 當元素出現在row之外時。
- 此時**cell的寬度跟隨grid的grid-template-columns**。
- 但長度(row)方向變成auto。
2. 語法 ：

.wrapper{
  display:grid;
  grid-auto-rows: 200px;
}

3. 例 ： 原本的grid只可以裝入6個m元素。
- 加入兩個額外的後，爆開。
- 多出的兩個因為是在row方向多出，因此col方向的同grid設定(寬同)。
- 多加入```grid-auto-rows : 200px```後，可以撐開原本超出的部分。

### 小結論三 : grid爆掉
1. 爆掉的形況 ：
- $case \ 1$ : 定義的template不夠裝的時候。
- $case \ 2$ : 內元素設定的位置超出graid時。
2. 造成的後果 ：
- $Point \ 1$ : grid外容器會變大，自動包下所有多的內元素。
- $Point \ 2$ : 依照是row或col方向爆開，有一方仍和grid大小一樣，另一邊變auto。
- 例 ： 下例中，元素超過col方向，但row的大小跟grid仍相同，只是col方向的大小不一樣。
3. 解決 ： 設定```grid-auto-columns```屬性，或```grid-auto-rows```。