iT邦幫忙

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

30 天 CSS 隨手筆記系列 第 11

30 天 CSS 隨手筆記 - 第 11 天 - OMG... Grid Layout~!! ( 7/7 - 結語 )

編輯中,僅請見諒 m(_ _)m

今天主要筆記了以下兩篇文章的內容,以及一點點個人心得

  1. Grid, Flexbox, Box Alignment: Our New System for Layout
  2. What next for CSS Grid Layout?

Grid 的下一步

  1. Subgrid

    這是一個有在提案中,但目前的 Level 1 沒有實作的屬性。

    先來看一個切版:http://codepen.io/rachelandrew/pen/MbGbQb?editors=1100

    html 架構為

    .wrapper
        .box-A
        .box-B
        .box-C
        .box-D
            .box-E
            .box-F
            .box-G
    

    .wrapper 是一個 4x4 的 grid,而 .box-D 則是一個 2x2 的 grid
    其中,.box-D 的子元素們 ( .box-E & .box-F & .box-G ) 的設定,跟 .wrapper 是完全沒有關係的 ( 完全聽 .box-D 的設定 )。

    但我們期望的是能像合併儲存格那樣,可以讓 cell 的寬高在最上層的 grid container 統一設定。

    舉例來說,我們可能拿到這樣的需求:

    左右兩側分別是 側欄一側欄二,兩個側欄的 footer ( 紫色區塊 ) 要對齊

    但一旦將 側欄主區塊 ( 綠色區塊 ) 跟 側欄 footer ( 紫色區塊 ) 寫在一個 grid item 中後,
    sidebar1sidebar2 之間的 "footer 對齊" 就不容易做到了

    當然可以把 主區塊footer 都一起放到 grid container 中:

    .container {
        grid-template-areas:
            "header           header  header  header         "
            "sidebar1_main    main    main    sidebar2_main  "
            "sidebar1_footer  main    main    sidebar2_footer";
    }
    

    ... 但這樣架構很不直覺 Orz

    如果有 subgrid 屬性的話,則我們可以這樣寫:

    .container
        .header
        .main
        .sidebar.sidebar1
            .sidebar__main
            .sidebar__footer
        .sidebar.sidebar2
            .sidebar__main
            .sidebar__footer
    
    .container {
        grid-template-areas: "header    header  header  header "
                             "sidebar1  main    main    sidebar2";
    }
    
    .sidebar {
        grid-row-end: span 2; ( 佔兩列的高度 )
        display: subgrid;
    }
    

    subgrid 的子元素就會自己對齊 .container 上畫的 grid line 了~

  2. 添加 table cell 樣式
    例如:背景顏色

  3. 更多 auto placement 相關的設定

  4. 允許不是方形的 grid area

  5. 讓內容可以跨 cell / 跨 area 顯示


Grid vs Flexbox

共通點

各自的使用時機


上一篇
30 天 CSS 隨手筆記 - 第 10 天 - OMG... Grid Layout~!! ( 6/7 - 實作 )
下一篇
30 天 CSS 隨手筆記 - 第 12 天 - CSS Variables~!!
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言