iT邦幫忙

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

30 天 CSS 隨手筆記系列 第 7

30 天 CSS 隨手筆記 - 第 07 天 - OMG... Grid Layout~!! ( 3/7 - container 屬性 1 )

今天筆記了幾個在 grid 上的基礎屬性,分別為:

  1. display ( 特定 value )
  2. grid-template-columns
  3. grid-template-rows
  4. ( shorthand ) grid-template
  5. grid-template-areas
  6. grid-column-gap
  7. grid-row-gap
  8. grid-gap

初始化

  1. display

    允許的值: grid / inline-grid / subgrid

    設定了這三個的任一個後,( 有支援的 ) 瀏覽器就會知道他的子元素們 ( 也就是 grid items ) 的位置、大小,會在這裡設定。

    grid - 本身的屬性類似 display: block
    inline-grid - 本身的屬性類似 display: inline-block
    subgrid - 如果這個元素本身也是個 grid item 時,我們就需要設定成設個值,來告訴瀏覽器 "這個元素的尺寸,請參考上一層的 grid container 的設定"


畫出格線

  1. grid-template-columns

  2. grid-template-rows

    兩個屬性的使用方式相同,都是用來定義 grid track 的。( 只是一個是用來定義欄、一個是用來定義列 )

    這兩個屬性可以做到兩件事:

    1. 定義 grid track 的尺寸
    2. ( optional ) 幫 grid line 取名字

    定義 grid track 的尺寸的方式是 依序寫下 grid track 的 size,不同的 track 之間以空白分開

    .grid-container {
        grid-template-columns: <track-size> ...;
        grid-template-rows: <track-size> ...;
    }
    

    而 size 可以是寫死的長度、百分比、"auto",或是一個 剩餘空間的分數的分子 ( fraction of the free space,以 fr 作為單位 )。

    剩餘空間的分數的分子 這個之後會在前一篇文章補上說明
    今天要趕不完了 _(°ཀ°」 ∠)_

    例如:

    .grid-container {
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
    }
    

    接著,也可以在定義 track size 的同時,幫 track 之間的 grid line 取名字

    定義 grid line 名字的方式,就是在 grid line 的位置上寫上我們想要的名字,並以 [] ( 中括號 ) 包覆。
    ( grid line 的位置... 就是在 track 的兩邊啦 XD )

    .grid-container {
        grid-template-columns: <line-name> <track-size> ...;
        grid-template-rows: <line-name> <track-size> ...;
    }
    

    例如:

    .grid-container {
        grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
        [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    }
    

    一切都是為了為未來著想 ---- 這樣 grid item 在設定位置時,就可以參照這邊的命名了 ( 這部分預計明天會再講到 )。

    另外還有幾個小撇步:

    1. 一條線也可以有多個名字

      使用方法:放在同一個中括號中,並以空格格開。

      .grid-container {
          grid-template-rows: [header-start] 150px [header-end main-start] auto [main-end footer-start] 200px [footer-end];
      }
      
    2. 可以使用 repeat() 方法

      使用方法:repeat(重複數量, 要重複的東西)

      .grid-container {
          grid-template-columns: repeat(3, 1fr) 5%;
      }
      
      /* 跟這個寫法一樣 */
      .grid-container {
          grid-template-columns: 1fr 1fr 1fr 5%;
      }
      
  3. ( shorthand ) grid-template

    .grid-container {
        grid-template: <grid-template-rows> / <grid-template-columns>;
    }
    

定義各個儲存格

也就是定義 grid area

  1. grid-template-areas

    這個屬性有用在昨天的舉例中,簡單來說就是

    1. 定義好各個 grid area 的名字
    2. 把名字填入相對應的 grid cell 中 ( 多個 grid cell 同一名稱的話,就是合併儲存格了~ )
    3. 每一列用 "" ( 雙引號 ) 包覆;每一列中的每一欄之間,用 ( 空白 ) 隔開
    4. 使用 "." 可以標記為 empty grid cell

    預設值: none

    使用方式:

    .grid-container {
        grid-template-areas: "<grid-area-name> | . | ..."
                             "..."
    }
    

    例如昨天的例子:

    .grid-container {
        display: grid;
        grid-template-columns: 2fr 20px 1fr;
        grid-template-rows: 100px 200px 100px;
        grid-template-areas: "header header header "
                             "main   .      sidebar"
                             "footer footer footer ";
    }
    

添加一些間隔

  1. grid-column-gap

  2. grid-row-gap

    我們可以在 cell 跟 cell 間,加上一點間隔。
    換句話說,我們可以把 ( 不包含外框的 ) grid line 設定成粗一點。

    用 word 裡面的表格隔線來舉例,他們各自會影響到的範圍如圖:
    http://ithelp.ithome.com.tw/upload/images/20161223/20103812TzzP3H6p2a.png

    預設值: 0

    使用方法:

    .grid-container {
        grid-column-gap: <line-size>;
        grid-row-gap: <line-size>;
    }
    
  3. ( shorthand ) grid-gap

    grid-column-gap 跟 grid-row-gap 又可以合併寫成這樣的形式:

    .grid-container {
        grid-gap: <grid-column-gap> <grid-row-gap>;
    }
    

使用以上這幾個屬性,就差不多可以 cover 目前 framework 中的 grid system 了,因此這邊寫說是 "基礎屬性"。
但其實還有 grid 更多可以厲害的屬性 ( 姑且稱之為進階屬性 XD ),值得我們好好探索。預計明天會繼續筆記以下幾個項目:

  • grid item 在 grid cell 中的對齊方式

    1. justify-items
    2. align-items
  • grid cell 在 grid container 中的對齊方式
    3. justify-content
    4. align-content

  • 讓 grid track 能自己產生,不用每個都設定
    5. grid-auto-columns
    6. grid-auto-rows

  • 讓 grid items 換個排列方式
    7. grid-auto-flow

  • 可以使用各種排列組合的 shorthand
    8. ( shorthand ) grid

其實會分成兩篇,
純粹是我今天寫不完,我對不起我的列祖列宗 Orz


上一篇
30 天 CSS 隨手筆記 - 第 06 天 - OMG... Grid Layout~!! ( 2/7 - 概觀 )
下一篇
30 天 CSS 隨手筆記 - 第 08 天 - OMG... Grid Layout~!! ( 4/7 - container 屬性 2 )
系列文
30 天 CSS 隨手筆記30

1 則留言

0
sppqre
iT邦新手 5 級 ‧ 2017-06-06 20:23:00

不好意思 請問一下
8. ( shorthand ) grid-gap
格式是不是<'grid-row-gap'> <'grid-column-gap'>才是正確的呢?

我要留言

立即登入留言