17 grid網格佈局

Grid 網格佈局

• 概述

  • 網格佈局（Grid）是最強大的 CSS 佈局方案。

    它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內建了。

  • Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。

    Flex 佈局是軸線佈局，只能指定"專案"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。

• 基本概念

  • 容器和專案

    • 採用網格佈局的區域，稱為"容器"（container）。容器內部採用網格定位的子元素，稱為"專案"（item）。

    • <div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
      </div>

  • 行和列

    • 容器裡面的水平區域稱為"行"（row），垂直區域稱為"列"（column）。

  • 單元格

    • 行和列的交叉區域，稱為"單元格"（cell）。

      正常情況下，n行和m列會產生n x m個單元格。比如，3行3列會產生9個單元格

  • 網格線

    • 劃分網格的線，稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。

      正常情況下，n行有n + 1根水平網格線，m列有m + 1根垂直網格線，比如三行就有四根水平網格線。

• 容器屬性

  • display 屬性(*)

    • grid

    • inline-grid

    • 設為網格佈局以後，容器子元素（專案）的float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。

  • grid-template-columns 屬性， grid-template-rows 屬性(*)

    • 容器指定了網格佈局以後，接著就要劃分行和列。grid-template-columns

      屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

    • .container {
       display: grid;
       grid-template-columns: 100px 100px 100px;
       grid-template-rows: 100px 100px 100px;
      }

    • 除了使用絕對單位，也可以使用百分比。

    • .container {
       display: grid;
       grid-template-columns: 33.33% 33.33% 33.33%;
       grid-template-rows: 33.33% 33.33% 33.33%;
      }

    • repeat()

      • .container {
         display: grid;
         grid-template-columns: repeat(3, 33.33%);
         grid-template-rows: repeat(3, 33.33%);
        }

      • repeat()接受兩個引數，第一個引數是重複的次數（上例是3），第二個引數是所要重複的值。

      • repeat()重複某種模式也是可以的。

        • grid-template-columns: repeat(2, 100px 20px 80px);

    • auto-fill 關鍵字

      • 有時，單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納儘可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。

        • .container {
           display: grid;
           grid-template-columns: repeat(auto-fill, 100px);
          }

        • 表示每列寬度100px，然後自動填充，直到容器不能放置更多的列。

    • fr 關鍵字

      • 為了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。

        • .container {
           display: grid;
           grid-template-columns: 1fr 1fr;
          }

        • fr可以與絕對長度的單位結合使用，這時會非常方便。

        • .container {
           display: grid;
           grid-template-columns: 150px 1fr 2fr;
          }

    • minmax()

      • minmax()函式產生一個長度範圍，表示長度就在這個範圍之中。它接受兩個引數，分別為最小值和最大值。

        • grid-template-columns: 100px 100px minmax(100px, auto);
          

    • auto 關鍵字

      • auto關鍵字表示由瀏覽器自己決定長度。

        • grid-template-columns: 100px auto 100px;
          

    • 網格線的名稱

      • grid-template-columns屬性和grid-template-rows屬性裡面，還可以使用方括號，指定每一根網格線的名字，方便以後的引用。

      • .container {
          display: grid;
          grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
          grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }
        

      • 上面程式碼指定網格佈局為3行 x 3列，因此有4根垂直網格線和4根水平網格線。方括號裡面依次是這八根線的名字。

        網格佈局允許同一根線有多個名字，比如[fifth-line row-5]。

    • 佈局例項

      • grid-template-columns屬性對於網頁佈局非常有用。兩欄式佈局只需要一行程式碼。

      • .wrap {
          display: grid;
          grid-template-columns: 70% 30%;
        }
        

      • 上面程式碼將左邊欄設為70%，右邊欄設為30%。傳統的九宮格佈局，寫起來也很容易。

      • grid-template-columns: repeat(9, 1fr);
        

  • grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性(*)

    • grid-row-gap屬性設定行與行的間隔（行間距），grid-column-gap屬性設定列與列的間隔（列間距）。

    • .container {
        grid-row-gap: 20px;
        grid-column-gap: 30px;
      }
      

    • grid-row-gap用於設定行間距，grid-column-gap用於設定列間距。

    • grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式，語法如下。

    • .container {
        grid-gap: 20px 30px;
      }
      

    • 如果grid-gap省略了第二個值，瀏覽器認為第二個值等於第一個值。

      • 根據最新標準，上面三個屬性名的grid-字首已經刪除，grid-column-gap和grid-row-gap寫成column-gap和row-gap，grid-gap寫成gap。

  • grid-template-areas 屬性

    • 網格佈局允許指定"區域"（area），一個區域由單個或多個單元格組成。grid-template-areas屬性用於定義區域。

    • .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-template-areas: 'a b c'
                             'd e f'
                             'g h i';
      }
      

  • grid-auto-flow 屬性

    • 劃分網格以後，容器的子元素會按照順序，自動放置在每一個網格。預設的放置順序是"先行後列"，即先填滿第一行，再開始放入第二行，即下圖數字的順序。

    • 這個順序由grid-auto-flow屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。

    • grid-auto-flow: column;
      

    • 還可以設成row dense和column dense。這兩個值主要用於，某些專案指定位置以後，剩下的專案怎麼自動放置。

  • justify-items 屬性， align-items 屬性， place-items 屬性(*)

    • justify-items屬性設定單元格內容的水平位置（左中右），align-items屬性設定單元格內容的垂直位置（上中下）。

    • .container {
        justify-items: start | end | center | stretch;
        align-items: start | end | center | stretch;
      }
      

    • 這兩個屬性的寫法完全相同，都可以取下面這些值。

      • start：對齊單元格的起始邊緣。

      • end：對齊單元格的結束邊緣。

      • center：單元格內部居中。

      • stretch：拉伸，佔滿單元格的整個寬度（預設值）。

    • place-items屬性是align-items屬性和justify-items屬性的合併簡寫形式。

      • 下面是一個例子。

      • place-items: start end;
        

      • 如果省略第二個值，則瀏覽器認為與第一個值相等。

  • justify-content 屬性， align-content 屬性， place-content 屬性(*)

    • justify-content屬性是整個內容區域在容器裡面的水平位置（左中右），align-content屬性是整個內容區域的垂直位置（上中下）。

    • .container {
        justify-content: start | end | center | space-around | space-between | space-evenly;
        align-content: start | end | center | space-around | space-between | space-evenly;  
      }
      

    • 這兩個屬性的寫法完全相同，都可以取下面這些值。（下面的圖都以justify-content屬性為例，align-content屬性的圖完全一樣，只是將水平方向改成垂直方向。）

    • place-content屬性是align-content屬性和justify-content屬性的合併簡寫形式。

    • 下面是一個例子。

    • place-content: space-around space-evenly;
      

    • 如果省略第二個值，瀏覽器就會假定第二個值等於第一個值。

• 專案屬性

  • grid-column-start 屬性， grid-column-end 屬性， grid-row-start 屬性， grid-row-end 屬性

    • 專案的位置是可以指定的，具體方法就是指定專案的四個邊框，分別定位在哪根網格線。

      • grid-column-start屬性：左邊框所在的垂直網格線

      • grid-column-end屬性：右邊框所在的垂直網格線

      • grid-row-start屬性：上邊框所在的水平網格線

      • grid-row-end屬性：下邊框所在的水平網格線

      • .item-1 {
          grid-column-start: 2;
          grid-column-end: 4;
        }
        

      • .item-1 {
          grid-column-start: 1;
          grid-column-end: 3;
          grid-row-start: 2;
          grid-row-end: 4;
        }
        

      • 這四個屬性的值，除了指定為第幾個網格線，還可以指定為網格線的名字。

      • .item-1 {
          grid-column-start: header-start;
          grid-column-end: header-end;
        }
        

      • 上面程式碼中，左邊框和右邊框的位置，都指定為網格線的名字。

        這四個屬性的值還可以使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。

      • .item-1 {
          grid-column-start: span 2;
        }
        

      • 使用這四個屬性，如果產生了專案的重疊，則使用z-index屬性指定專案的重疊順序。

  • grid-column 屬性， grid-row 屬性(*)

    • grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式，grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式。

    • .item {
        grid-column:  / ;
        grid-row:  / ;
      }
      

    • 下面是一個例子。

    • .item-1 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
      }
      /* 等同於 */
      .item-1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
      }
      

    • 上面程式碼中，專案item-1佔據第一行，從第一根列線到第三根列線。

      這兩個屬性之中，也可以使用span關鍵字，表示跨越多少個網格。

    • .item-1 {
        background: #b03532;
        grid-column: 1 / 3;
        grid-row: 1 / 3;
      }
      /* 等同於 */
      .item-1 {
        background: #b03532;
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
      }
      

  • grid-area 屬性

    • grid-area屬性指定專案放在哪一個區域。

    • .item-1 {
        grid-area: e;
      }
      

    • grid-area屬性還可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合併簡寫形式，直接指定專案的位置。

    • .item {
        grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
      }
      

    • 下面是一個例子。

    •     .item-1 {
            grid-area: 1 / 1 / 3 / 3;
          }
      

• justify-self 屬性， align-self 屬性， place-self 屬性

  • justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。

    align-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個專案。

  • .item {
      justify-self: start | end | center | stretch;
      align-self: start | end | center | stretch;
    }
    

  • 這兩個屬性都可以取下面四個值。

    • start：對齊單元格的起始邊緣。

    • end：對齊單元格的結束邊緣。

    • center：單元格內部居中。

    • stretch：拉伸，佔滿單元格的整個寬度（預設值）。

  • 下面是justify-self: start的例子。

    • .item-1  {
        justify-self: start;
      }
      

  • place-self屬性是align-self屬性和justify-self屬性的合併簡寫形式。

    • place-self: <align-self> <justify-self>;
      

  • 下面是一個例子。

    • place-self: center center;
      

  • 如果省略第二個值，place-self屬性會認為這兩個值相等。