# 🏅 Day 35 - 網格練習

### 題目

利用 [Bootstrap 網格系統](https://getbootstrap.com/docs/5.3/layout/grid/) 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，並在圖片下方應用[通用類別的文字](https://getbootstrap.com/docs/5.3/utilities/text/#font-size)新增不同大小的文字，如圖所示：
>桌機尺寸時設為四個一排
>

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

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

### HTML

>此 HTML 會出現 x 軸，可理解 [Containers](https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work) 與 [格線系統](https://getbootstrap.com/docs/5.3/layout/grid/#how-it-works) 的相關知識，再次修改下方程式碼避免**雷點** x 軸 出現。

<div class="...">
  <div class="row">
    <div class="...">
      <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片1<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片2<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片3<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片4<h2>
    </div>
  </div>
</div>

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/OJBdvBb
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/rNEzrQq)|
| 02 | Hailey |[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvLqxbq)|
| 03 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/jOjLvVv) |
| 04 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB) |
| 05 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/RwzZYgV) |
| 06 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/OJejoeo?editors=1010)|
| 07 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/dyBzgZe?editors=1000)|
| 08 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/eYwELjO)|
| 09 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/gONxBjy?editors=1100) |
| 10 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/mdZMQGV) |
| 11 | Hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/ExBvOqJ) |
|12 |邵|[Codepne](https://codepen.io/ukscrlno-the-typescripter/pen/ZEdJVxd)|
| 13 | kawa | [Codepen](https://codepen.io/z83xji6/pen/jOjLdZP) |
| 14 | wind | [Codepen](https://codepen.io/wind7y/pen/VwJzgoq) |
| 15 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/rNEzEdK) |
| 16 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/OJejKew) |
| 17 | haojing | [Codepen](https://codepen.io/hjxu/pen/ExBvwwv) |
| 18 | yoishere | [Codepen](https://codepen.io/yoishere/pen/LYKjgrm) |
| 19 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/zYVEEJw) |
| 20 | Mike | [Codepen](https://codepen.io/mike2049/pen/GRbMQyX?editors=1000) |
| 21 | emmayo | [Codepen](https://codepen.io/emmayo/pen/eYwGMWe) |
| 22 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/jOjGKBj) |
| 23 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/zYVdLRm) |
| 24 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/JjQraaY) |
| 25 | kaka_945 | [Codepen](https://codepen.io/kay945/pen/LYKzJKR) |
| 26 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/vYqeVRj) |
| 27 | 俊 | [Codepen](https://codepen.io/jun12079/pen/vYqeVQa) |
| 28 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/ZEdXXPB?editors=1010) |
| 29 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/zYVProe) |
| 30 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/GRbOqgz?editors=1010)|
| 31 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/LYKezRG?editors=1000) |
| 32 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/PorELGx) |
| 33 | xcx100 | [Codepen](https://codepen.io/c13026/pen/LYKQWWX) |
| 34 | Glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/wvLyPBY)|
| 35 | Emma | [Codepen](https://codepen.io/Emma0919/pen/RwzQqPj) |
| 36 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/eYwMGxo) |
| 37 | Enn | [Codepen](https://codepen.io/enntang/pen/ZEdoxeZ) |
| 38 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/NWZzbab) |
| 39 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/MWMXzLR) |
| 40 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/RwzBrEB?editors=1000) |
| 41 | macihuang | [Codepen](https://codepen.io/macy1215/pen/qBzgWer) |
| 42 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/RwzdLVa?editors=1000) |
| 43 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/NWZJXgG) |
| 44 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/OJeejGq?editors=1100) |
| 45 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/qBeEVMK) |
| 46 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/bNbNaeK?editors=1100) |
| 47 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/ogNQVdV?editors=1000) |

<!--
| No | Discord | [Codepen]() |
-->