---
# System prepended metadata

title: grid 使用筆記

---

# grid 使用筆記
**基本設定**
```
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
</div>
```
```
.container{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:repeat(auto-fit,1fr);
  grid-template-rows: 250px 250px;
}
```
## grid-template-rows & grid-template-columns
**grid-template-rows**
是由上到下的網格
![](https://i.imgur.com/aaoDqPy.png)

**grid-template-columns**
是由左到右的橫向格線
![](https://i.imgur.com/dbtbfnC.png)

可以使用這兩個屬性來劃出網格，常使用
* px, %, auto。

e.x.
```
grid-template-columns:100px 50% auto;
```
* fr 

e.x
```
grid-template-columns:1fr 1fr 1fr;
```
剩餘的空間被分成三份,每個columns平均被分到一分。
* minmax()
e.x.
```
grid-template-columns:50px minmax(100px, 3fr) 50px;
```
中間哪格最小是100px, 最大會被分到3份。
* repeat()
e.x
```
grid-template-columns: repeat(5, 1fr);
```
重複五次，每一份
* auto-fit, auto-fill   
e.x.
```
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
```
在使用 repeat() 時，如果不確定自己要的重複次數，可以使用 auto-fill 或 auto-fit 來盡量放入重複的track

另外這兩個的差別有
 **i. auto-fill**
  盡量放入重複的track
 ![](https://i.imgur.com/wC6dVMp.png)
 ![](https://i.imgur.com/bWnJiLC.png)
 
 **多出的四格也會被畫出來**
 
 接下來
 ![](https://i.imgur.com/8ULlvra.png)
 如果改成每格為1fr且最小為70px
 變成7x2的網格，因為70px可以再500px的空間中被分成七格,剩下的10px平均分配給每一格所以出現71.43

**ii. auto-fit**
  盡量放入重複的track, 但空白的track的size會被設定為0px, 並折疊起來
  ![](https://i.imgur.com/kyZHkzQ.png)
  ![](https://i.imgur.com/jJTy4Aj.png)
  多出的四格被折起來了
  
  接著
  ![](https://i.imgur.com/Co658H4.png)
  一樣改成auto-fit且minmax(70px,1fr)
  變成6x2的網格,70px x 6= 420px ,剩餘空間=500-420 =  80, 80/6= 13.3 然後平均分配給每一格。 
  
  
## grid-template-areas & grid-area
用起來很像是設定好大格局再把設定好的元件放進來,用法滿直覺的,常見使用方式是在父層設定grid-template-areas並寫出布局
e.x.
```
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
```
然後在各對應的子層設定grid-area,命名成相對應的名子
個人覺得在變版上使用很方便直接在父層修改排列組合就行
## grid-auto-flow: row | column;

**grid-auto-flow: row;** 
先佔滿整"行"

![](https://i.imgur.com/Qh5UP8t.png)

**grid-auto-flow: column;**

先佔滿整"列"
![](https://i.imgur.com/HFlHKtG.png)

如果有設定grid-template-rows將會折成兩行

[CodePen](https://codepen.io/danielgg1024/pen/abyYRRj?editors=1100)