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

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

## 第一步：區塊規劃
面對這種看起來比較複雜的版型時，可以先試著拆分區塊結構，以紅框區分為左右兩大塊

接著再拆分小區塊，以黃框區分結構

## 第二步：撰寫 HTML 結構
HTML

<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

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

@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://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](連結) | -->