前言

今天終於來到本系列文第一個重頭戲，
也是 Bootstrap 非常實用的~~~~~ Grid System (網格系統)
Bootstrap Grid 的特點是用在 RWD (響應式網頁設計) 非常好用！
不過並不是用了 Grid 就不需要用到 Flex，
學了之後發現它們是相輔相成的關係吧，
那就讓我們進入正文吧！
(PS. 後來發現 CSS 也有個叫 Grid 的屬性，
這邊釐清一下，這篇文章講的是 Bootstrap 的 Grid 哦！

本日正文

Grid system - Bootstrap

首先 Grid 有 Container, Row, Column 這三種元素，
Container 顧名思義就是容器，
你可以先把 Container 想像成像一個 <div> 框住的區塊。

Container 裡面由 Row, Column 組成，
Row 就是列，因此一列裡面會有很多欄，就是 Column。

在 Grid 世界裡，
把一個空間分成 12 個區塊，
因此 Row 一列中最多可以含有 12 個格子。
(PS. 這邊指的不是 Column，不要搞混，看下面例子可能會比較清楚 )

概念講到這邊可能大家還是會覺得有點模糊吧，
沒關係當初的我也是，
還是直接看例子大家應該就知道怎麼回事了~
例如把昨天的例子用 Grid 的方式改寫一下：

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col border">2-1</div>
    <div class="col border">2-2</div>
    <div class="col border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

你可能已經看出一些端倪了，
這邊簡單說明一下，
首先最外面用 container 這個 class，
裡面包三列 row，
再來第一列跟第三列因為都只有 1 欄 col，
所以寬度佔滿整個 container，
但第二列有 3 欄，
上面有提到一列中最多可以含有 12 個格子，
Grid default 會平均分配，
因此 12/3 = 4，
所以每一個 Column 各別會佔 4 個格子的寬度。

進階題來了，
如果現在想要 2-2 比 2-1, 2-3 寬，
2-2 是 2-1, 2-3 的兩倍寬，
這樣該怎麼做？
先讓我們思考一下，
總共 12 格，所以 1:2:1
12/4 = 3，
2-1, 2-3 分別拿到 3 格，
2-2 拿到 6 格，
Bootstrap Grid 有提供 col-3,col-6 這樣的寫法，
如果沒有寫指定數字就會用 12 去平均分配這樣。

所以我們可以改寫成這樣：

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-6 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

以上只是把 col 改成 col-3,col-6 就有這樣的變化，
是不是很有趣呢？

那你可能會說，萬一我算數不好，
算超過 12 個格子的話怎麼辦？
放心，那就算是超出那列空間，
會自動被換到下一行去。
例如我把上面 2-2 的 col-6 故意改成 col-9，
就會變成這樣：

...
...
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-9 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
...
...

Grid 好像跟什麼似曾相識？

其實到這邊你會發現 Grid 好像跟之前傳統 HTML/CSS 在寫 % 有點異曲同工之妙，
例如以下例子 <ul> 有 4 個 <li>，
然後你就會計算每個 <li> 扣掉 margin 1%，可被分配到 23%，
像這樣：

[HTML]

<ul class="ul">
  <li class="li">1</li>
  <li class="li">2</li>
  <li class="li">3</li>
  <li class="li">4</li>
</ul>

[CSS]

.ul {
  display: flex;
  list-style: none;
}

.li {
  width: 23%;
  margin: 1%;
  background-color: pink;
  padding: 10px;
}

Grid 簡化這樣的計算方式，
將空間用 12 格去計算就好，
而且 Grid 好處當然不只這樣，
更重要的是 Bootstrap 有提供不同的 Media Queries(裝置) 可以進行不同設定，
(不太知道 Media Queries 是什麼的人可以參考之前大大在鐵人賽寫的這篇文章 →
Day22：小事之 Media Query )
可以讓你很方便的做到 RWD，
例如電腦版畫面夠寬，我想要讓每一個格子平均分配就好，所以只用 col-md，
但在手機版我可能想要突顯某一塊，我就多加一個設定 col-xs-8，
讓它在手機版時佔 8 個格子的寬度。

這樣講可能還是有點不清楚，
所以明天文章會詳細說明這一塊，
那今天文章就到這邊啦，
那我們明天再見囉！

這邊也附上我之前很常參考的文章 → 利用 Bootstrap Grid System 排版的學習筆記

還有附上本日 CodePen 連結：
Day6 - Bootstrap Grid
Day6 - HTML/CSS