# HTML(8/10) Day 17 五倍紅寶石(第八屆共筆)(2021/7/20)
## RWD：
### 格線：
- 方法一：槽狀 = 我要有幾列
可做不等寬的格線，推薦分母用12或是 24，因為可被2 3 6...整除，排版會比較好看。
ex:吃披薩切12片很好平分給大家，但如果有人食量大想多吃也行。
- 方法二： = 每列有幾欄
只能做等寬的格線。
ex:共產主義下吃披薩，看有幾個人，100%一定要平均分給大家，不能有人多拿或少拿。
- 方法三：
不推薦，用 margin 去做，然後把他扣掉。

不像疫苗混搭可能會有副作用，方法一及方法二可以互相搭配使用，讓排版更有彈性，這是OK的。

- container 是最外層容器，制定最大寬度。
- row 設定：flex。
- col-1~12：設定每個格線要佔幾份。(每個人要吃幾塊披薩)
- row-cols-1~6：設定 col 的寬度。(這一列(這個披薩)要分幾等份(分給幾個人吃))
- col：用來被設定每塊格線的寬度。
- item：控制裡面內容的排版。

包完會出現以下 padding 不等寬的問題
可以把 row 的 margin-left&right 負值
以及container 的 padding-left&right 正值解決此問題。

---

###### tags: `HTML` `CSS`