# Grid Layout
###### tags: `CSS`

## :pushpin:網格基礎
### 格線容器 Grid Container
* 建立網格格式化上下文
* 管理其直接子元素的間距、大小和對齊

.grid {
  max-width: 800px;
  display: grid;
}

### 格線軌道 Grid Track
在格線裡透過 `grid-template-columns` (直欄) 與 `grid-template-rows` (橫列)屬性定義了行與列。

.grid {
  max-width: 800px;
  display: grid;
  grid-template-columns: 200px auto 200px; /*三欄中間欄寬度為自動*/ 
  grid-template-rows: 100px 200px; /*兩列:第一列高度100px 第二列200px*/ 
  grid-gap: 15px; /*網格的間距*/
}

==auto 自動分配長度==


## :pushpin:彈性的網格

### 單位fr
使用fr控制網格的比例且依照空間縮放尺寸

display: grid;
grid-template-columns: 1fr 1fr 1fr;

### repeat
使用repeat輸入重複出現的規則

display: grid;
grid-template-columns: repeat(3, 1fr);
/*
grid-template-columns: 20px repeat(6, 1fr) 20px;
*/

### minmax
像制定RWD規則grid也能為item制定其最大最小值

display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr)); /*三欄 最小值為200px  大於200px則為1:1:1*/

### auto-fit auto-fill
排滿一列:是沒有差異的
不滿一列: `auto-fill`保持原比例不變形`auto-fit` 延展填滿一列
- 排滿一列

- 不滿一列

display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
/*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/

- auto-fill

- auto-fit

### 控制隱藏的軌道
若有多列卻只指定了兩列的高度，那麼在第三列使用grid-auto-rows則可讓剩下的每一列都擁有其value的高度

.grid {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /*剩餘的每一列由grid-auto-columns grid-auto-flow控制*/
  grid-template-rows: 100px 100px;
  grid-gap: 15px;
  grid-auto-columns: 1fr; /*控制隱式列軌道*/
  grid-auto-flow: column; /*控制流向*/
}

## :pushpin:排版
### grid-row-start grid-row-end
使用開發者工具可以觀察網格的數字，並依數字對start & end制定位置

main {
  grid-row-start: 2;
  grid-row-end: 3;
}
/*從第二列到第三列*/
aside {
  grid-row-start: 1;
  grid-row-end: 4;
}
/*從第一列到第四列*/


正值會從網格環境的開頭開始算起，而負值會從網格環境最尾巴的線開始算起

/*使用縮寫*/
header {
  grid-column: 1 / -1;
}

main {
  grid-row: 2 / 3;
}

aside {
  grid-row: 2 / -1;
}

footer {
  grid-row: -3 / -1;
}


### grid-template-areas
於item自定義grid-area的名稱，並在container排列每行每列的位置

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px minmax(200px, 1fr) 100px; 
  grid-gap: 10px;
  grid-template-areas: 
    "header header"
    "main aside" 
    "main footer";
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;  
}

footer {
  grid-area: footer;
}

如圖header占據兩欄 main占據兩列

使用手機優先的排版 並加上`@media`縮放後更改排版區塊

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
}

nav {
  grid-area: nav;
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

@media (min-width:768px) {
  .container {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px minmax(150px, auto) 100px;
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer"
  }
}

@media (min-width:992px) {
  .container {
    grid-template-areas:
      "header header header"
      "nav main aside"
      "nav footer footer"
  }
}

---
[Grid Layout 二部曲：流動排列與隱式網格的小藏識](https://jhlstudy.blogspot.com/2018/07/grid-layout_8.html)