---
# System prepended metadata

title: Day 20 - RWD 版型、RWD 排版間距
tags: [網頁切版直播班 - 2025 夏季]

---

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

### 題目

### RWD 基本排版

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

![](https://i.imgur.com/TQlwI1n.png)

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

![](https://i.imgur.com/cU4FF87.png)

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

![](https://i.imgur.com/xM2BUvK.png)


> 需使用 **CSS Reset**

---

### RWD 排版間距
為了讓每個卡片之間都能有間距，可以在卡片左右加上 padding，卡片間的間距就會從兩個 padding 產生出來，此時最左及最右邊的卡片都會多出 padding。
要將最左及最右多出的 padding 消除，就要在卡片外層（整體卡片列表 `.card`）使用 margin 負值回推。
另外，為了讓 container 不會貼齊卡片，container 也需設定左右 padding。
（推擠的值需依照設計稿設定）
以[鞋子電商設計稿](https://www.figma.com/design/WQh5XkQtQYB0yhIGx5wnMB/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W1%E3%80%81W2-%EF%BC%88student-ver.%EF%BC%89?node-id=12001-21433&p=f&t=1NYFvTv4ZrU6bWDM-0)為例，間距寬度為 24px，則推擠的值為 24px/2 = **12px**
![](https://hackmd.io/_uploads/SyijbkcGex.png)



程式碼範例：
```css=
*, *::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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

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


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/bNVGOaB?editors=1100) |
|  2  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/LEpYMBo?editors=1100) |
|  3  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/VYvwqBZ) |
|  4  | Shawn  |[Codepen](https://codepen.io/LiShang/pen/pvjoqQa) |
|  5  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/QwjWzJq) |
|  6  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/XJmWoBP?editors=1100) | 
|  7 |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/pvjoqBL) |
|  8  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/zxvYyyy) |
|  9  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/bNVGOmW)|
| 10  |Saika|[CodePen](https://codepen.io/saika4501/pen/NPGWoPw)|
|  11 |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/bNVGOPr?editors=1100) |
|  12 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/YPyzBpG) |
|  13  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=MYaWLEx) |
|  14  |  西娜  |[Codepen](https://codepen.io/Sheena-the-encoder/pen/empYxMw) |
|  15  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/raONRyL) |
|  16  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/PwPoLjX?editors=1100) |
|  17  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/EaVxMbm?editors=1100)
|  18  |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/pvjoYWJ)
|  19  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/YPyzgEv?editors=1100) |
|  20  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/NPGWJeP) |
|  21  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/zxvYXNj) |
|  22  |  suemma  |[Codepen](https://codepen.io/suemma/pen/ZYbENYq) |
|  23  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/KwdKLVe) |
|  24  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/azvbrbr) |
|  25  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/empYagX) |
|  26  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/raONgPN?editors=1100) |
|  27  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/JoYjQKN) |
|  28  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/KwdKjZp) |
|  29  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/yyYLWJR) |
|  30  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/gbaOVJw?editors=1100) |
|  31  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/gbabbva) |
|  32  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/vENEEbO)|
|  33  |  Scrooge  |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/zxvxxmm) |
|  34  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/empmNdx?editors=1100) |
|  35  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/YPyzeKq) | 
|  36  |  Hao  |[Codepen](https://codepen.io/Howell/pen/dPYPpOw) |
|  37  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/VYvYKrO) |
|  38  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/MYaYbXx) |
|  39  |  Antonio  |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/EaVaNEY) |
|  40  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/QwjwgVW) |
|  41  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/bNVNrNN) |
|  42  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/MYaYrzr) |
|  43  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/yyYyKYd) |
|  44  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/JoYoQBJ) |
|  45  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/YPyXyqQ) |
|  46  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/myeJpob?editors=0100) |
|  47  |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/zxvGPbo) |
|  48  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/ByoNEBM?editors=1100) |
|  49  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/YPyXbEP?editors=1100) |
|  50  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/LEppPbv) | 
|  51  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/QwjjEQz) |
|  52  |  B  |[Codepen](https://codepen.io/Babel777/pen/pvjjQLG) |
|  53  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/LEpGLVP) |
|  54  |  Doreen翠翠翠  |[Codepen1](https://codepen.io/cuei-sian-Wang/pen/myeVgKj)|
|  55  |   water   |[Codepen](https://codepen.io/wateruby/pen/ZYbQNPr)|
|  56  |  小趴  |[Codepen](https://codepen.io/papa2415/pen/bNVpWQp)|
|  57  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/raOxLrX)|
|  58  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/azvBXmO)|
|  59  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/raOjdBx?editors=1100) |
|  60  |  孟  |[Codepen](https://codepen.io/Mengru0503/pen/RNWpXGd?editors=1100) |
|  61  |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/PwPZByO) |
|  62  | YUCCC |[Codepen](https://codepen.io/taroooo/pen/yyYbzyp) |
|  63  |  cindy  |[Codepen]([連結](https://codepen.io/a50134/pen/ByowmEJ)) |
|  64  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/VYvrgQd) |
|  65  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/empVRBW) |
|  66  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/KwVzvdV?editors=1100) |



<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->