---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 23

## 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 / 答案 |
|:-----------------:|:--------------------------------------------------------------------------:|
| 薏慈#3795 | [CodePen](https://codepen.io/its_wang/pen/xxWeGEd) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/PoRbwZR) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/GRxvZNW) |
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/XWEeMbR) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/ZExXerJ) |
| Jamie Wu#9345 | [CodePen](https://codepen.io/Wu220103/pen/PoRJpQo) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/PoRJpBw) |
| Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/wvmrJyK) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/GRxMWeg?editors=1100) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/yLKzMGo) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/abYLJaj?editors=1100) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/LYdzWoa) |
| Daisy_Li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/rNdGyZJ?editors=1100) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/YzarVzK) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/oNqGZOO?editors=1100) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/ExEwWJe) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/LYdzyVo) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/PoRJmYN) |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/gOeGWrM) |
| toshow#5609 | [CodePen](https://codepen.io/toshow/pen/MWVEmbX) |
| 洋蔥#5295 | [CodePen](https://codepen.io/HSUNA/pen/gOeGmyp?editors=1100) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/xxWXddN?editors=1100) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/RwMLVVa) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/QWmqvqQ) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/BarwRPw) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/VwXMbRK) |
| Ke #1391 | [Codepen](https://codepen.io/federerke/pen/zYWEwNy) |
| Fang #4680 | [Codepen](https://codepen.io/std95174/pen/dymVWJo?editors=0100) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/VwXMWwP) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/xxWXrOV) |
| Amberhh#2465 | [CodePen](https://codepen.io/Amberhh/pen/BarwZwq) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/WNzZOdm) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/abYLWdX) |
| QOO#8446 | [CodePen](https://codepen.io/QOOQOOQ/pen/VwXMbXe) |
| 鴨鴨#9822 | [Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/OJvxgYq) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/BarwZwq?editors=0110) |
| 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/vYReZMr?editors=1100) |
| Leo Song#8278 | [Codepen](https://codepen.io/sunnylaba/pen/dymVRxm?editors=1100) |
| Fanglin #4054 | [CodePen](https://codepen.io/flynn841028/pen/PoRJKPg) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/ZExXJLe) |
| leeli#6423 | [Codepen](https://codepen.io/leelilee/pen/KKoXvzV?editors=1100)
| 黃士桓#7654 | [codenPen](https://codepen.io/shr-huan-huang/pen/PoRJKKM) |
| LHchien33#6232 | [CodenPen](https://codepen.io/lin_chien/pen/mdxBMvb) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/GRxMMmq)|
|yuyu#6310|[Codepen](https://codepen.io/yuyu0905/pen/ZExXXej?editors=1100)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/PoRJJdj?editors=1100)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/NWYaajv)|
|Henry#7386|[CodePen](https://codepen.io/h1nr9/pen/mdxBqEq)|
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/LYdzjMM?editors=1100)|
|zera#6060|[codePen](https://codepen.io/zera-tseng/pen/wvmrdYp)|
|雷雷#7844|[codePen](https://codepen.io/lei-yi-jie/pen/ExEwbXK)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/jOzGaGR?editors=1100)|
|Melon #0380|[Codepen](https://codepen.io/BalaFang/pen/KKoXyyj)|
|Vian #7338|[Codepen](https://codepen.io/vianwu31/pen/JjLrOwJ?editors=1100)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/ExEvWrG)|
|Winnie Wu#5468|[Codepen](https://codepen.io/Pooh-Wu/pen/BarwJYy?editors=1100)|
|ajhappy#6488|[Codepen](https://codepen.io/ajhappy5438/pen/dymVZXv)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/oNqGEeN)|
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/MWVEQVq)|
|鑫鑫#4346|[Codepen](https://codepen.io/Neil1024/pen/MWVEVJM?editors=1100)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/jOzGzjO?editors=1100)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/PoRJRMV)|
| ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/qBoPYzL)|
| Vera#5592 |[codepen](https://codepen.io/skvera/pen/mdxBKLr)|
| yuchenye#6119 |[codepen](https://codepen.io/yuchen/pen/VwXMdEa)|
| NeilLin#3009 |[codepen](https://codepen.io/a0071421/pen/PoRJBme)|
| 我是泇吟 #5189 | [Codepen](https://codepen.io/hexschool/pen/WNzoydr?editors=1100) |
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/yLKzqzm)|
| YU #0618 |[CodePen](https://codepen.io/yoken_/pen/xxWXJxG)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/YzarLrd)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/QWmqJMY)|
| 楓之聲#6945 |[CodePen](https://codepen.io/sshane258/pen/XWEeoKR)|
| 狸貓#5863 |[CodePen](https://codepen.io/tanuki320/pen/eYMGwzw)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/KKoXjqE)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/rNdGEvV)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/RwMjwrV)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/ExEbjPe)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/KKoyVJa)
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/NWYwWPM?editors=1100)|
|逸川#6319|[CodePan](https://codepen.io/bryanlin8911/pen/NWYwrbB)|
|kancheng#3915|[CodePan](https://codepen.io/kancheng/pen/LYdOLKL)|
|YI#0863|[CodePan](https://codepen.io/YI0305/pen/bGvYYGa?editors=0100)|
|yo_yo#2678|[CodePan](https://codepen.io/djmliogn-the-flexboxer/pen/oNqoqbb)|
|Pony#6778|[CodePan](https://codepen.io/Pony0303/pen/zYWPLdY)|
|Tuhacrt#0008|[CodePan](https://codepen.io/Tuhacrt/pen/poLdxer)|
|Tori#1248|[CodePan](https://codepen.io/FlyTori/pen/oNqoaLm)|
|IreneY #0086| [Codepen](https://codepen.io/HalfPlannedJourney/pen/rNdYqmv)|
|Deborah#0033| [Codepen](https://codepen.io/deborah-tsai/pen/JjLOQvX?editors=1100)|
|Carrie #2750| [Codepen](https://codepen.io/carrie-wang/pen/xxWPvEd)|
|mei#8421| [Codepen](https://codepen.io/Shila-Chen/pen/RwMxNbQ)|
|鉦勝 #8333| [Codepen](https://codepen.io/atckmax823/pen/vYRpOOM?editors=1100)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/mdxpdXM)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/yLKpgwW)|
|wlc#4877|[CodePen](https://codepen.io/arxmyifs/pen/GRxyryE?editors=1100)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/QWmarob?editors=1100)|
|aki|[codepen](https://codepen.io/aki168/pen/MWVrXQO)|
|家洋#6999|[codepen](https://codepen.io/aa235553756/pen/WNzdyyR)|
|choubree#4350 |[Codepen](https://codepen.io/BreeChou/pen/MWVQaVz)|
|Cliff#4606 |[Codepen](https://codepen.io/Cliff_hex/pen/zYWRdBG?editors=1100)|
|艾草#4830 |[Codepen](https://codepen.io/jmkhsutp/pen/dymdQvb?editors=0100)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/YzaemJY)
|rueee#7997|[codepen](https://codepen.io/Jull-C/pen/vYRRWBw)
|Jumpye#8601|[codepen](https://codepen.io/Jumpye/pen/NWYMKEP)
|suihsilan#9485|[codepen](https://codepen.io/suihsilan/pen/ExELyWR)
|kevin8349#6131|[codepen](https://codepen.io/kun8349/pen/wvmjyzR)
|hua#9099|[Codepen](https://codepen.io/LHua/pen/dymeLWY)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/OJvEmvB)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/PoRBPWg)|
|Manson許#2295|[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/ZExMeNj)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/XWEyQGe?editors=1100)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/LYdXKpV)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/wvmRKxX)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/ZExwbym)|
|鎔瑄#8578|[CodePen](https://codepen.io/barbarayou/pen/ZExwOxV)|
|曼曼#8356|[codepen](https://codepen.io/Vanyacheer/pen/GRxeNpY?editors=1100)|
|jin.huang#4666|[codepen](https://codepen.io/Wu220103/pen/PoRJpQo)|
|RuoAn#7124|[codepen](https://codepen.io/LiauRuoAn/pen/QWmPMvx)|