[教學] CSS3 Grid 原生網格系統，讓版面編排更靈活

　　一直以來梅干相當習慣使用Bootstrap來設計網頁版型，最主要的原因就在於Bootstrap的網格系統相當的方便，也相當的好用，當在切版時，幾乎不太需要寫到CSS，只需要依照Bootstrap所定義的樣式規範，編寫HTML標籤，就可快速的將版面編排完成，同時還具備RWD自適應的效果，可以大幅的縮減網頁切版的工時與流程，但隨著Bootstrap升級，也將原先3.0的網格，更改為flex，讓在網頁排版時，更加的靈活，甚至也決解網頁區塊高度不一時，所造成跑版的問題。

　　而除了flex外，CSS3原生也有網格系統Grid，但一直未被廣為使用的原因就在於，當初支援Grid的屬性瀏覽器並不多，但時已至今幾乎所有新一代的瀏覽器都支援了，甚至就連IE 11版也支援Grid的語法，因此就引起梅干的興趣，玩了一下發現CSS3 Grid真是一個好物，讓網頁編排變得更簡易，同時也讓版面編排更靈活，因此想了解CSS3 Grid這屬性對網頁編排有多方便，現在就一塊來看看吧！

---

Grid屬性

---

首先，從這張表可看到，幾乎所有的瀏覽器都支援了，除了Oprea Mini。

---

而在Grid這語法中，grid-template-columns、rid-template-row，這二個屬性最為重要，一個指的是行，另一個是列，因此只要搞懂行列後，接下來就很容易上手啦！

---

在要開始用之前，需先將display設為grid，接著grid-template-columns後方可設定區塊的寬度值，若設為50% 50%表示一列有二欄，各50% 50%若要切成三欄式，也可寫為10% 80% 10%，這樣就會變成左右各10%，中間是80%，這樣是不是很方便呀！甚至當要設定間距時，只需使用grid-column-gap、grid-row-gap。

---

除了用百分比外，還多了一個新的單位為fr，而fr是用分子跟分母的概念，因此沿續上一個範例，就可寫成1fr 1fr，就是變成各1/2的意思。

---

當要分割成四等分時，就可輸入1fr 1fr 1fr 1fr四次。

---

除了重覆打四次外，甚至也可用repeat(重覆次數,單位)。

---

除了等分外，也可分割成1/4或3/4，這時可用grid-template-areas來作規範，當3/4就重覆三次，這時區塊就會變成3/4 content，而1/4是sidebar。

---

除了用grid-template-areas，也可指定分割比例，當要選擇區塊一到三，則是用條來計算，所以就是1/3，從1開始到3，所以就是區塊二個區塊的意思，除此之外也可使用span，span代表包含的意思，假設一次要顯示2個，就可寫span 2，這樣就是一次使用2個區塊的意思，到這邊是不是有感受到Grid的方便啦！而梅干也簡單了寫了幾個小範例，各位可以看一下範例，更容易理解。

---

#範例1

---

#範例2