# 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**
是由上到下的網格

**grid-template-columns**
是由左到右的橫向格線

可以使用這兩個屬性來劃出網格，常使用
* 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

**多出的四格也會被畫出來**

接下來
如果改成每格為1fr且最小為70px
變成7x2的網格，因為70px可以再500px的空間中被分成七格,剩下的10px平均分配給每一格所以出現71.43

**ii. auto-fit**
盡量放入重複的track, 但空白的track的size會被設定為0px, 並折疊起來
多出的四格被折起來了

接著
一樣改成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;**
先佔滿整"行"


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

先佔滿整"列"

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

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