```
### 格線系統分開套用
1. 新增一個 css 檔案，裡面放格線系統，方便不同檔案間同時使用
2. 在 html 檔案，導入css link
3. 建議命名：grid.css
### 固定起手式
* 通常 container 會設定 1440px 或 1200px
* 盡量不要讓數字出現小數點，不然會有精度問題
* 通常設定都會由此開始：
* 手機 : .col-12
* 平板 : .col-md-4 or .col-md-3
* 所以可以建立快捷指令增加效率
## 小工具 Snippets
設定快捷指令（VScode)：
1. 選取所有快捷的部分
2. `command`+`shift`+`p` / `ctrl`+`shift`+`p`
3. input "snippet" -> "creat snippet"
4. 選使用語言`html`
5. 取名 -> 設定快捷鍵 -> 設定描述
6. 完成
編輯快捷指令 (VScode)：
* 要選是什麼類型的快捷(ex.`html` `css`)
建立步驟：
1. 先用心智圖思考需要建立的快捷指令
2. 針對快捷指令建立系統，設計輸入層級
## 等比例區塊 （包含寬高）
- 普遍的狀況下，高度不能套用百分比距離
- 因為父層高度由子層內容決定，子層內容高度又由父層決定
- 如父層有高度的話才適合用百分比
- 產生相互參照問題，很亂
- 可以用 `padding-bottom` 當作比例運算工具
### **當 padding 使用==百分比==作為單位時，計算的參考是父層的空間寬 (width)**
* 官方定義：The size of the padding as a percentage, relative to the width of the containing block.
例：
1. 父層寬為`1000px`，`padding-bottom: 25%;`就是父層寬 `1000px * 25% = 250px`
2. 父層寬為`1000px`，`padding: 25%;` 代表上下左右的`padding`都有父層寬的 25%
將％換算成px
```css=
.wrap{
/* width: 1000px; */
/* 拿掉寬度後，就以視窗大小來計算->等比例縮放*/
border: 3px solid red;
}
.box{
width: 25%;
height: 0px;
padding-bottom: 25%;
/* 以百分比為單位的時候，參考父層的寬度 */
background-color: #aaa;
}
```
youtube 預設影片尺寸 `560*315`
如果要用兩欄版面，讓影片能夠等比例縮放
```css=
.wrap{
/* width: 1000px; */
display: flex;
margin: auto;
border: solid 2px blue;
}
.col{
width: 50%;
}
.mv{
width: 100%;
padding-bottom: 56.25%; /* 315/560 * 100 = 56.25 */
background-color: #f00;
}
```
不專業計算法(?)
- 若`a:b = c:d`的話，則`ad=bc`。
---
### 課後思考及問題
1. 格線系統尺寸設定
- container, row, col 都只用來做框架設定
- 內容容器的高若等於 100% ，對內容容器使用的 margin 及 padding 就會被算到內容高度裡
- 此時在 row 上的預設值為 `align-item: stretch;` 所以內容會被撐開，如更改為其他屬性則高度會被壓回且套用設定。
- 如果對內容容器使用 `box-sizing: border-box;` 尺寸就會連 padding 一起算進去
- 結論：
- 如要調整內容物件間距離，要在 col 上直接調整 padding 而不是內容容器調 margin
- 如要調整內容物件的 padding 又要用 `height: 100%;`，最好使用 border-box
2. 若是 RWD 的排版內容差別巨大，則可以乾脆寫兩組同一區域，利用 display: none 讓某一組消失。