# 🏅 Day 22 - RWD 版型、RWD 排版間距

### 題目

### RWD 基本排版

請複製此 [Codepen](https://codepen.io/hexschool/pen/ZExpovQ) 做出響應式排版：
任務中已提供 HTML 的部分，請同學將 CSS 內有「`...`」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排


>平板尺寸時設定為兩個一排


>手機尺寸時設定為一個一排


> 需使用 **CSS Reset**

---

### RWD 排版間距
為了讓每個卡片之間都能有間距，可以在卡片左右加上 padding，卡片間的間距就會從兩個 padding 產生出來，此時最左及最右邊的卡片都會多出 padding。
要將最左及最右多出的 padding 消除，就要在卡片外層（整體卡片列表 `.card`）使用 margin 負值回推。
另外，為了讓 container 不會貼齊卡片，container 也需設定左右 padding。
（推擠的值需依照設計稿設定）
以[三四週設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/screen/0c592e9b-6edc-48d1-9540-27cef649efb7/specs/)為例，間距寬度為 24px，則推擠的值為 24px/2 = **12px**

<img src="https://i.imgur.com/ZdNE1uw.png" width="300px" style="margin-bottom: 8px">

程式碼範例：

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  /* 依照設計稿 PC 版：
   * 容器寬度為 1296px，因為有設定為 border-box，所以整體寬度需加上左右 padding
   * 整體 container 寬度為 1296px + 12px*2 = 1320px   
   * （關於 box-sizing 觀念可以再回顧 Day7 每日任務）*/
}

.card { /* 卡片列表 */
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.card-item { /* 卡片（寬度設定以 PC 版四個一排為例） */
  width: 25%;
  padding-left: 12px;
  padding-right: 12px;
}

請**運用「RWD 基本排版」完成的程式碼**，為卡片之間加上 **24px** 的間距
> 容器寬度：
> 桌機尺寸時為 1296px
> 平板尺寸時為 696px
> 手機尺寸時為 348px
> **需自行調整 container 寬度**

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：（可以寫在一起，也可以分開提交）
RWD 基本排版：https://codepen.io/hexschool/pen/gOeMNwW
RWD 基本排版 + 間距：https://codepen.io/hexschool/pen/WNzoydr?editors=1100
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/oNrLeOx)|
| 2 | han | [Codepen](https://codepen.io/iamHanCheng/pen/abgZyXo) |
| 3 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/Bagzwzx) |
| 4 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/xxoOXOZ) |
| 5 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/NWZrajE) |
| 6 | 俊 | [Codepen](https://codepen.io/jun12079/pen/BagzwRP) |
| 7 | kawa | [Codepen](https://codepen.io/z83xji6/pen/vYqKeXJ) |
| 8 | hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/poXbWwm) |
| 9 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 10 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/xxoOXWR) |
| 11 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/QWXEqZX) |
| 12 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/OJeXxvo?editors=0100) |
| 13 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/yLdJzwN?editors=1100) |
|14|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvLWPBL)|
| 15 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/KKjMXEK) |
| 16 | DoryH | [Codepen](https://codepen.io/dorihung/pen/qBzNVNx) |
| 17 | Sammy| [Codepen](https://codepen.io/fsczdlla-the-bold/pen/OJeXOeM) |
| 18 | KUN. | [Codepen](https://codepen.io/barry91205/pen/gONMovg) |
| 19 | OSN |[Codepen](https://codepen.io/osncodepen/pen/WNqxMrg)|
| 20 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/VwJjXmG)|
| 21 | Jim | [Codepen](https://codepen.io/JimChou/pen/bGPevOp?editors=1100)|
| 22 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/GRbqGjO?editors=1100)|
| 23 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/bGPeKvO?editors=1100)|
| 24 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/abgZjEq)|
| 25 |邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/bGPexJL)|
| 26 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/zYVBmrY) |
| 27 | yoishere | [Codepen](https://codepen.io/yoishere/pen/oNrLMYd) |
| 28 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/ZEdOaaK) |
| 29 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/YzoWdXm?editors=1100) |
| 30 | Mike | [Codepen](https://codepen.io/mike2049/pen/poXbXwy?editors=1100) |
| 31 | MY | [Codepen](https://codepen.io/ahmomoz/pen/poXbMNd?editors=0110) |
| 32 | emmayo | [Codepen](https://codepen.io/emmayo/pen/abgmoNz) |
| 33 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/QWXKLJP) |
| 34 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/xxoExKd) |
| 35 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/MWMeMNE)|
| 36 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/ZEdpYoM) |
| 37 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/MWMjYLP)|
| 38 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/wvLzBQq) |
| 39 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/GRbjoYj) |
| 40 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/wvLzWXv) |
| 41 | wind | [Codepen](https://codepen.io/wind7y/pen/eYwdzXG) |
| 42 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/YzoGVwG) |
| 43 | xcx100 | [Codepen](https://codepen.io/c13026/pen/WNqGEex) |
| 44 | wuasu | [Codepen](https://codepen.io/wuasu/pen/WNqGEQo?editors=1100) |
| 45 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/dyBpzqy?editors=1100) |
| 46 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/gONwxyg) |
| 47 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/BagLwmx) |
| 48 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/ZEdpaEb) |
| 49 | chris | [Codepen](https://codepen.io/chrischen666/pen/mdZrXPW?editors=1100) |
| 50 | hao jing | [Codepen](https://codepen.io/hjxu/pen/WNqGGjj) |
| 51 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/LYKRJJK) |
| 52 | n913239 | [Codepen](https://codepen.io/n913239/pen/wvLWrmQ) |
| 53 | Dolce_墨 | [Codepen](https://dolcetseng.github.io/vite-training/22.html) |
| 54 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/qBzqBEr?editors=1100) |
| 55 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/NWZbKeO) |
| 56 | AURA TAO| [Codepen](https://codepen.io/AURATAO/pen/poXNrgN) |
| 57 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/XWLNeMQ) |
| 58 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/oNrYdWQ) |
| 59 | 610| [Codepen](https://codepen.io/iamHanCheng/pen/abgZyXo) |
| 60 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/bGPgGrO?editors=0110) |
| 61 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/ZEdLWOj?editors=1100) |
| 62 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/vYqgKJp) |
| 63 | gracechiang | [Codepen](https://codepen.io/gracechiang225/pen/VwJPyaB?editors=1010) |
| 64 | jasonlin| [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/RwzKdzJ)
| 65 | ashley | [Codepen](https://codepen.io/ashleylu/pen/YzoZZRd)
| 66 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/GRbmqdv) |
| 67 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/WNqjzXJ) |
| 68 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/zYVwyyZ)|
| 69 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/KKjmJbv) |
| 70 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/LYKyKeV) |
| 71 | Enn | [Codepen](https://codepen.io/enntang/pen/KKjqKqR) |
| 72 | Toung | [Codepen](https://codepen.io/Toung/pen/bGPRXpM) |
| 73 | Emma | [Codepen](https://codepen.io/Emma0919/pen/VwJzdYy) |
| 74 | Judy | [Codepen](https://codepen.io/yangchi/pen/eYwyppz) |
| 75 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/MWMrOqJ) |
| 76 | 小翎 | [Codepen](https://codepen.io/debbielin/pen/mdZpmwM?editors=1100) |
| 77 | Kim | [Codepen](https://codepen.io/kim0101__/pen/ExBQwNz?editors=1100) |
| 78 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/dyBeXqR) |
| 79 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/xxojRje) |
| 80 | zen | [Codepen](https://codepen.io/zen742937/pen/poXVBwJ) |
| 81 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/dyBQgpN) |
| 82 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/yLdWZrv?editors=1100) |
| 83 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/QWeLgqp) |
| 84 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/MWNrJBq) |
| 85 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbOjZKQ?editors=1100) |
<!--
| 67 | codepen | [Codepen]() |
-->