# grid 基本練習

### 設計稿：
(來源：[黃奇昌](https://www.cakeresume.com/zz41354899?locale=zh-TW)設計師)

---
### 步驟一：
今天要紀錄```display:grid;```的基本用法。
首先我先計算總共有幾個格子：

總共有28個格子，那我就在html寫了28個box。
用.box寫他們的共通樣式，再用.box$寫他們個別的顏色和grid位置。
還要寫一個父層.container把他們包起來，等一下用來下```display:grid;```。

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5"></div>
  <div class="box box6"></div>
  <div class="box box7"></div>
  <div class="box box8"></div>
  <div class="box box9"></div>
  <div class="box box10"></div>
  <div class="box box11"></div>
  <div class="box box12"></div>
  <div class="box box13"></div>
  <div class="box box14"></div>
  <div class="box box15"></div>
  <div class="box box16"></div>
  <div class="box box17"></div>
  <div class="box box18"></div>
  <div class="box box19"></div>
  <div class="box box20"></div>
  <div class="box box21"></div>
  <div class="box box22"></div>
  <div class="box box23"></div>
  <div class="box box24"></div>
  <div class="box box25"></div>
  <div class="box box26"></div>
  <div class="box box27"></div>
  <div class="box box28"></div>
</div>

### 步驟二：
接下來寫CSS樣式。
先在.container下```display:grid;```，
接著計算總共有幾行幾列：

分別是12和4。
- 把12寫進```grid-template-columns```裡，```repeat(12, 1fr)```代表重複12個比例為1的區塊。
- 下面的```repeat(4, 100px)```代表有4個區塊，每一區塊設定為100px。這裡也可以改變寫法為```grid-template-rows: 100px 100px 100px 100px;```，寫repeat是簡化的寫法。
- ```grid-gap```用來設定區塊之間的間距。

.container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 6px;
}
.box{
  border-radius: 3px;
}

#### 備註：
因為grid目前(2021/09/06)是比較新的用法，所以各瀏覽器的支援度還不完整，在專案上使用時要考量到這一點。

(來源：[Can I Use - grid](https://caniuse.com/?search=grid))

### 步驟三：
接下來要設定各個box的顏色和大小。
- ```grid-area```的四個數值是由```grid-row-start```、 ```grid-column-start```、 ```grid-row-end```、 ```grid-column-end```結合而來。
- 以.box3為例，算法是要看格線中的間線：
- grid-row-start：<font color="#f00">紅數字1</font>
- grid-column-start：<font color="#f00">紅數字2</font>
- grid-row-end：<font color="#f00">紅數字3</font>
- grid-column-end：<font color="#f00">紅數字4</font>

因此會寫作：```grid-area: 1/3/2/5;```


.box1{
  background: #00D2D2;
  grid-area: 1/1/2/2;
}
.box2{
  background: #FF5C00;
  grid-area: 1/2/2/3;
}
.box3{
  background: #00D2D2;
  grid-area: 1/3/2/5;
}
.box4{
  background: #FF5C00;
  grid-area: 1/6/2/7;
}
.box5{
  background: #FF5C00;
  grid-area: 1/7/2/8;
}
.box6{
  background: #00D2D2;
  grid-area: 1/9/2/11;
}
.box7{
  background: #9003FF;
  grid-area: 1/11/2/12;
}
.box8{
  background: #FFC121;
  grid-area: 1/12/2/13;
}
.box9{
  background: #09FF7A;
  grid-area: 2/1/3/2;
}
.box10{
  background: #FFC121;
  grid-area: 2/2/3/3;
}
/* 接下來到.box28以此類推，想閱讀完整版本可以點選最下方的範例程式碼連結 */

---
## 這樣就完成了~~ :tada:

### 完成圖

是不是長得有點像 metro ui 的介面呢？
範例程式碼：[codepen](https://codepen.io/Jo_Yun/pen/abwmeQd?editors=1100)