iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
2
自我挑戰組

30 天 CSS 隨手筆記系列 第 5

30 天 CSS 隨手筆記 - 第 05 天 - OMG... Grid Layout~!! ( 1/7 - 簡介 )

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,無法做到 "跨列"
    flexbox
  2. grid - optimized for 2-dimensional layouts
    grid

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
http://ithelp.ithome.com.tw/upload/images/20161220/20103812eBW5VNuPA0.png

但也可以觀察到,IE 已經有部分支援、即將推出的 Firefox 52 / Chrome 57 也即將開始支援。
Jen SimmonsRevolutionize 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 的版本 裡,不容易掌握子元素的寬度,所以需要做出一點妥協 ( 這邊是統一正方形 ):

http://ithelp.ithome.com.tw/upload/images/20161220/20103812oRxQsYDkrq.png

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

http://ithelp.ithome.com.tw/upload/images/20161220/20103812lWJMq689et.png

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

http://ithelp.ithome.com.tw/upload/images/20161220/20103812NvmpPrmcbT.png

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

大螢幕
http://ithelp.ithome.com.tw/upload/images/20161220/201038121jF2QLWpmZ.png
小螢幕
http://ithelp.ithome.com.tw/upload/images/20161220/20103812TFbLvSlg8a.png

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


上一篇
30 天 CSS 隨手筆記 - 第 04 天 - WTF... Flexbox~!! ( 3 / 3 - 實作練習 )
下一篇
30 天 CSS 隨手筆記 - 第 06 天 - OMG... Grid Layout~!! ( 2/7 - 概觀 )
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言