10 月時，我與同事一起參加了 CSS Conf 2016，非常多的講者都在推 Grid 這個東西。
( 我當時連聽都沒聽過，還覺得那可能是一個新的 css framwork。慚愧 =艸= )
後來查資料時，心態就從 "喔~ 好像還不錯" 變成 "OMG 這也太厲害了吧!!!!"。因此為了不久的將來著想，我決定要認真學習一下。

What

CSS Grid Layout Module Level 1 :: W3C
這邊的 Gird，不是指 bootstrap 或 susy 中的格線系統，而是由 W3C 於 2012 年提出的新的 layout model。在處理元素的尺寸 ( sizing ) 跟位置 ( positioning ) 上，非常非常強大！

也許大家會覺得有了 flexbox 後，gird 好像沒麼麼必要。
但這兩張圖可以看出一些端倪：

1. flexbox - single-axis–oriented，無法做到 "跨列"
   
2. grid - optimized for 2-dimensional layouts
   

Why

為什麼說他強大呢?
相信大家一定有類似的經驗：切版時為了達成某些版面的需求，有時候會多寫一些 html。
但使用 Grid 的話，我們幾乎可以做到 結構與樣式分離 這件事。
( 聽起來有點拗口 Orz... 等等會用具體的例子，來解釋這句話。 )

如同前一段所說，flexbox 是 single-axis–oriented，flex items 只能照單一方向排列。
而 grid 則是二維的，我們可以在 grid container 上定義格線 ( grid line )，然後直接指定 grid items 的位置。
( 具體的寫法，預計在明天會有詳細的說明跟 DEMO )

BUT
Grid 目前的瀏覽器支援度不高 ( 甚至可以說 "非常低" )，今天的 caniuse 截圖如下，幾乎是滿江紅。

http://caniuse.com/#search=grid

但也可以觀察到，IE 已經有部分支援、即將推出的 Firefox 52 / Chrome 57 也即將開始支援。
Jen Simmons 在 Revolutionize Your Page 的演講中提到，大約明年 1 月 chrome 就會支援了。

即使支援度有待加強，但考慮到：

1. 寫起來又快又方便
2. 可以先將 grid 樣式寫在 feature query ( 詳見 @support ) 中，這樣就能確保目前樣式不跑版，又能無縫接軌未來的瀏覽器。
3. 時間過得很快，馬上就支援了 ( 尤其 chrome 在台灣的市佔率非常高 )
4. 瀏覽器的進步，需要你我的鞭策

因此我相信，現在就是學習 grid、使用 grid 的最好時機（ ✿＞◡❛）

Demo - 以 Gallery 為例

在看 DEMO 之前，首先需要一個支援 grid 的瀏覽器。以下有幾個選項：

1. Chrome Canary
2. Firefox Developer Edition
3. Firefox Nightly
4. Safari Technology Preview

可以選一個來看唷~

範例來源：http://labs.jensimmons.com/ - Image Gallery Study

在 使用同樣 html 結構 的條件下，不同的 layout mode 效果如下：

1. 使用 float 的版本 裡，不容易掌握子元素的寬度，所以需要做出一點妥協 ( 這邊是統一正方形 )：

2. 使用 flexbox 的版本 中，可以看到寬度的變化比較靈活了

3. 使用 columns 的版本 則是在縱軸上掌握度較高，橫軸上就差強人意了。

4. 使用 grid 的版本中 則可以看到，在兩個維度上的表現都非常好。

大螢幕

小螢幕

難怪前不久開始有人說不要再刻 Grid System 了，因為 Grid Layout 能做到事情，比很多 css framwork、瀑布流套件都還多啊！
期待瀏覽器廣泛支援的那一天 =D