---
# System prepended metadata

title: "\U0001F3C5 Day 21 - 進階排版 RWD 練習"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 21 - 進階排版 RWD 練習

今天我們要來練習設計稿的穿搭靈感區塊排版以及 RWD 設計。

## 第一步：區塊規劃
面對這種看起來比較複雜的版型時，可以先試著拆分區塊結構，以紅框區分為左右兩大塊
![image](https://hackmd.io/_uploads/rJrNmf3mle.png)

接著再拆分小區塊，以黃框區分結構
![image](https://hackmd.io/_uploads/ryMU4znQex.png)

## 第二步：撰寫 HTML 結構
HTML
```htmlembedded=
<section class="container">
  <h2 class="title">穿搭靈感</h2>
  <div class="d-flex column-gap-8 ...">
    <div class="d-flex flex-column row-gap-8 w-66 ...">
      <div class="d-flex flex-grow-1 column-gap-8 ...">
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img1.png?raw=true" alt="穿搭1" />
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-2.png?raw=true" alt="穿搭2" />
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-3.png?raw=true" alt="穿搭3" />
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-4.png?raw=true" alt="穿搭4" />
      </div>
      <div class="d-flex column-gap-8 ...">
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-6.png?raw=true" alt="穿搭5" />
        <div class="d-flex flex-column row-gap-8 ...">
          <div class="d-flex column-gap-8 ...">
            <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-7.png?raw=true" alt="穿搭7" />
            <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-8.png?raw=true" alt="穿搭8" />
          </div>
          <div class="d-flex column-gap-8 ...">
            <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-9.png?raw=true" alt="穿搭9" />
            <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-10.png?raw=true" alt="穿搭6" />
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column row-gap-8 w-33 ...">
      <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-5.png?raw=true" alt="穿搭10" />
      <div class="d-flex column-gap-8 ...">
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-11.png?raw=true" alt="穿搭11" />
        <img src="https://github.com/0404kai/2025-layout-week1-img/blob/main/img-12.png?raw=true" alt="穿搭12" />
      </div>
    </div>
  </div>
</section>
```

CSS
```css
img {
  max-width: 100%;
  min-width: 0;
/*  用於解決 flex 子元素溢出問題，參考文章：https://juejin.cn/post/7307041255740833830  */
  display: block;
  object-fit: cover;
}
.container {
  max-width: 1296px;
  margin: 0 auto;
}
.title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 16px;
}
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-grow-1 {
  flex-grow: 1;
}
.column-gap-8 {
  column-gap: 8px;
}
.row-gap-8 {
  row-gap: 8px;
}
.w-66 {
  width: 66%;
}
.w-33 {
  width: 33%;
}
```

## 第三步：RWD 規劃
這塊 RWD 需依設計稿轉為單欄 X 軸滑動效果，因此這邊會使用 `overflow-x: auto` 語法，在外層區塊加上 X 軸，另外會運用到 `display: contents` 語法（[參考文章](https://im1010ioio.hashnode.dev/css-display-contents)），隱藏多餘的 HTML 結構，即可達成單欄 X 軸滑動效果。

CSS
```css
@media screen and (max-width: 768px) {
  img {
    width: 300px;
    height: 300px;
    min-width: auto;
  }
  .d-md-contents {
    display: contents;
  }
  .column-md-gap-16 {
    column-gap: 16px;
  }
  .overflow-md-auto {
    overflow-x: auto;
  }
}
```

### 題目
請複製該 [CodePen 模板](https://codepen.io/fhljksmg-the-styleful/pen/GgJGwRR?editors=1100)，試著添加對應 class 到 HTML 標籤中，完成 RWD 設計。



## 回報流程

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

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/GgJvLNq?editors=1100
-->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  1  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/XJmJQrR)|
|  2  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/MYaYReJ)|
|  3  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/zxvxXBE?editors=1100) |
|  4  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/myeygxN?editors=1100)|
|  5  |  那個貓貓  |[Codepen](https://codepen.io/zorakao/pen/LEpEvOg?editors=1100)|
|  6  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/qEOEwgg)|
|  7  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/RNWNmwP)|
|  8  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/MYaYdmq?editors=1100)|
|  9  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/YPyPMqR?editors=1100) | 
|  10  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/raOagGP?editors=1100) |
|  11  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/KwdwLvR?editors=1100) |
|  12  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/myeygEo?editors=1100) |
|  13  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ZYbYdYg?editors=1100) |
|  14  |  Hao  |[Codepen](https://codepen.io/Howell/pen/OPyPeVZ) | 
|  15  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=ZYbYdbg) |
|  16  |  Chia_  |[Codepen](https://codepen.io/Chia-the-encoder/pen/empmomv) |
|  17  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/LEpEKKQ?editors=1100) |
|  18  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/dPYPBWz) |
|  19  |  WAWATA  |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/VYvYoGN) |
|  20  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/PwPwMaw?editors=1100) |
|  21  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/PwPwMLZ?editors=1100) |
|  22  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/ByoNBVw?editors=1100) |
 |  23  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/empNYxz?editors=1100) | 
 |  24  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/GgpJRzY) | 
|  25  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/LEpVEva) | 
|  26  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/qEOdOmR?editors=1100) |
|  27  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/MYawgWV) |
|  28  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/QwjbGZr) |
| 29  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/wBKagJE?editors=1100) |
| 29  |  Shawn  |[Codepen](https://codepen.io/LiShang/pen/YPyXNje) |
| 30  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/OPyVWKq?editors=1100) |
|  31  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/WbQbVGQ) |
|  32  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/RNWPxXb?editors=1100) |
|  33  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/jEbPZpx) |
|  34  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/raOVvXd) |
|  35  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/MYawPoG) |
|  36  |  kate_bearchou  |[Codepen](https://codepen.io/fhljksmg-the-styleful/pen/GgJvLNq?editors=1100)|
|  37  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/XJmbyjr?editors=1100) |
|  38  |  suemma  |[Codepen](https://codepen.io/suemma/pen/LEppGjd) |
|  39  |  Eagle Huang  |[Codepen](https://codepen.io/YuCi/pen/empNJWR) |
|  40  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/bNVEgbR?editors=1100) |
|  41  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/yyYOyre) |
|42|小趴|[Codepen](https://codepen.io/papa2415/pen/EaVKmGR)|
|  43  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/vENGjEx?editors=1100) |
|  44  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/gbaMOXM) |
|  45  |  B  |[Codepen](https://codepen.io/Babel777/pen/RNWopbw) |
|  46  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/xbwRqBb) |
|  47  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/jEbVRXx?editors=1100) |
|  48  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/qEOrPYO?editors=1100) |
|  49  |  孟  |[Codepen](https://codepen.io/Mengru0503/pen/raOmBeq) |
|  50  |  cindy  |[Codepen](https://codepen.io/a50134/pen/empGyvY?editors=1100) |
|  51  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/XJmzXvK) |
|  52  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/QwjQpKq) |
|  53  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/qEOdpVK) |
|  54  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYKMPZW?editors=1100) |

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