iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 10

30 天 CSS 隨手筆記 - 第 10 天 - OMG... Grid Layout~!! ( 6/7 - 實作 )

別人的作品:香料們

grid 的好處之一:可以少寫很多、很多、很多 media query。

from: http://labs.jensimmons.com/examples/spices-1.html

  1. 視窗寬度 < 100px 時

    • 一列一張圖
    • 圖片大小為 100%
  2. 視窗寬度 > 100px 時

    • 圖片寬度最小為 100px,一列放儘量多的圖片
      ( 螢幕寬 199px 時,顯示一張圖;螢幕寬 200px 時,顯示兩張圖 ... )

    • 圖片平均佔滿一列的寬度

      換句話說...
      * 一列 N 張圖 ( N = `Math.floor(螢幕寬 / 100px)` )
      * 圖片大小為 `螢幕寬 / N`
      

目前的 html 結構為:

<main>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
    <figure><img src="圖片網址"></figure>
</main>

用 float 可以寫很多 @media query 來完成差不多的效果

https://jsfiddle.net/lazy_shyu/0enc33kc/3/

figure {
    float: left;
    width: 100%;

    // 這邊是寫到 10 而已,不能無限 Orz
    @for $n from 2 through 10 {
        @media (min-width: #{$n * 100px}) { width: (100% / $n); }
    }
}

但使用 grid 的話,我們可以這樣寫:

https://jsfiddle.net/lazy_shyu/0enc33kc/4/

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

一切就完成了~!!!!
程式碼簡潔,而且一行要多長就多長 ( 本來是只寫道 10 ),所有複雜的計算他都幫我們算好了 <3

auto-fit 會根據後面算出來的 track size,來自己算出應該要多少個 track

另外 minmax() 很好用~!! 但它的支援度也十分淒慘 Orz
使用方法詳見:https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
這邊 minmax(150px, 1fr) 的意思就是:

  1. 最小 150px,一排放儘量多個 grid item
  2. 最大 1fr,所有 cell 平分 grid container 的寬度 ( 或高度 )

練習切版

看到了一的很適合用 grid 的版面 ( 圖片網址 )

大概切了後是這樣的:https://jsfiddle.net/732v1mdg/2/

html 跟 css 寫起來都不太複雜,
但這時候就會發現,不能直接在 container 上定義樣式有點討厭,導致我們需要多加很多不需要的 grid item。


上一篇
30 天 CSS 隨手筆記 - 第 09 天 - OMG... Grid Layout~!! ( 5/7 - item 屬性 )
下一篇
30 天 CSS 隨手筆記 - 第 13 天 - transform~!!
系列文
30 天 CSS 隨手筆記30

2 則留言

0
JerryHong
iT邦新手 5 級 ‧ 2016-12-25 23:56:13

聖誕快樂~~~

聖誕快樂 =D
明天放假更快樂 。:.゚ヽ(*^∀^)ノ゚.:。

/images/emoticon/emoticon54.gif < 雖然不知道 M'mas 是什麼哏 XD

我猜是畫圖的人英文不好,畫錯了XDD

0
法蘭克
iT邦新手 5 級 ‧ 2016-12-26 00:39:32

什麼巫術!
還在努力看懂中...

令人期待的巫術~!! XD

我要留言

立即登入留言