1：基本布局

Grid 布局是二維的基于網格的布局系統(tǒng)，它可以同時處理列和行（這是對比flex彈性盒模型布局而言）；第一個專門為解決布局問題而生的CSS模塊。

幾個基本概念：

Grid Container，又叫做Grid容器，就是設置了display：grid的元素。

  .main{
      display:grid;
  }

Grid Item，又叫做Grid容器成員，Grid容器下面的直接子元素。

Gird Line，Grid容器行和列的網格線；它又分為垂直網格線（column grid lines）和水平網格線（row grid lines）。

Gird Track，兩個相鄰網格線之間的空間。

Grid Cell，兩個相鄰的行和兩個相鄰的列網格線之間的空間，基礎單元。

Grid Area，四個網格線包圍的總空間，可以由任意數量的Grid Cell組成。

2：瀏覽器兼容

browser.png

3：Grid容器 (Grid Container) 屬性

常用的屬性有14個：

• display，分為grid（塊級網格）和inline-grid（行級網格）

   .main {
         display: grid;
   }
   .main {
         display: inline-grid;
   }
  

• grid-template-columns/rows，定義了網格的行和列

     .main{
          grid-template-columns: [<Grid Line Name>] <Grid Track Size> ...;
          grid-template-rows: [<Grid Line Name>] <Grid Track Size> ...;
     }
  

  基本語法

      .main {
        display: grid;
        grid-template-columns: [columns-1] 100px [columns-2] 200px auto;
        grid-template-rows: [rows-1] 100px [rows-2] 200px;
      }
  

  重復

      .main {
          display: grid;
          grid-template-columns: repeat(4, 100px [columns]) auto;
          grid-template-rows: repeat(4, 100px [rows]);
      }
  

  自由空間，給定比例，自由分配空間

    .main {
        display: grid;
        grid-template-columns: 100px 1fr 3fr;
        grid-template-rows: 100px 1fr 3fr;
    }
  

• grid-template-areas（定義網格模板）

    .header {
        grid-area: header;
        background: #8A469B;
      }
      .left {
        grid-area: left;
        background: #EA7F26;
      }
      .right {
        grid-area: right;
        background: #EA7F26;
      }
      .footer {
        grid-area: footer;
        background: #8A469B;
      }
      .main {
        height: 500px;
        display: grid;
        //縱向分成了5個
        grid-template-columns: 100px 100px auto 100px 100px;
        //橫向分成3個
        grid-template-rows: 100px auto 100px;;
        grid-template-areas:
            "header header header header header"
            "left left . . right"
            "footer footer footer footer footer";
      }
  

• grid-template（grid-template-rows、grid-template-column、grid-template-areas的簡寫）

    .main {
         height: 500px;
         display: grid;
         grid-template:
          [title-left] "title title title" 80px [title-right]
             [content-left] "left content content" 1fr [content-right]
             [footer-left] "left footer footer" 80px [footer-right]/ 120px 1fr 120px;
    }
  

• grid-column/row-gap（網格線的寬度/高度）

    .main {
          display: grid;
          grid-template-columns: 100px 200px auto;
          grid-template-rows: 100px 200px;
          grid-column-gap: 20px;
          grid-row-gap: 20px;
      }
  

• grid-gap（網格線的寬度/高度簡寫形式）

    .main {
          display: grid;
          grid-template-columns: 100px 200px auto;
          grid-template-rows: 100px 200px;
          grid-gap: 20px 30px;
      }
  

• justify-items（元素在Grid Cell橫軸上的對齊方式，出現的前提是元素要小于Grid Cell的尺寸），它一共有4個值：start、end、center、stretch（默認）；stretch使用時要去掉元素的寬度，不然無效。

      .main {
          display: grid;
          justify-items: start;
      }
  

• align-items（元素在Grid Cell縱軸上的對齊方式），同上justify-item一樣也是有四個屬性值相同。

      .main {
          display: grid;
          align-items: start;
      }
  

• justify-content（Grid Cell在橫軸上的對齊方式），它一共有7個值：start、end、center、stretch、space-around、space-between、space-evenly。

      .main {
          display: grid;
          justify-content: start;
      }
  

• align-content（Grid Cell在縱軸上的對齊方式），同上。

      .main {
          display: grid;
          align-content: start;
      }
  

• grid-auto-columns/rows（自動生成網格(隱式) ，出現場景：網格溢出時子元素超過父元素使用）
  基本語法

    .main {
        display: grid;
        grid-auto-columns: <Grid Track Size> ...;
        grid-auto-rows: <Grid Track Size> ...;
    }
  

  使用的情況分為兩種：不指定grid-auto-columns和指定grid-auto-columns。
• grid-auto-flow（自動放置Grid容器成員，出現的前提是不指定grid-template-areas，不指定每個元素的放法），它有三個值：row（按行填充）、column（按列填充）、dense（按最小剩余空間填充）

    .main {
        display: grid;
        grid-auto-flow: row;
    }
  

• grid（template-rows、template-columns、template-areas、auto-rows、auto-columns、auto-flow簡寫）

    .main {
        grid: [row1-start] "header header header" 1fr [row1-end]
              [row2-start] "footer footer footer" 25px [row2-end]/ auto 50px auto;
    }
  

4：Grid容器成員 (Grid Item) 屬性

常用屬性有9個：

• grid-column-start/end（根據網格線確定Grid Item位置），它一共有四個值：number、name、span number（跨過幾條網格線）、span name（跨越到哪一根網格線）。

    .main {
      display: grid;
      grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item {
      grid-column-start: 2;
      grid-column-end: span 4;
    }
  

• grid-row-start/end（根據網格線確定Grid Item位置）

     .main {
       display: grid;
       grid-template-columns: 100px 100px 100px;
         grid-template-rows: 100px 100px 100px;
     }
     .item {
       grid-row-start: span 2;
       grid-row-end: 4;
     }
  

• grid-column/row（grid-column/row-start/end簡寫）

    .main {
        display: grid;
        grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
    .item {
        grid-column: span 2 / 4;
        grid-row: 1 / 4;
    }
  

• grid-area（創(chuàng)建區(qū)域），分為兩種情況：命名引用和直接定義。
  命名引用 grid-area:name;
  直接定義 grid-area: name | row-start | column-start | row-end | column-end

    .main {
        display: grid;
        grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px;
      }
    .item {
        grid-area: item;
        grid-area: 3 / 1 / 4 / 6;
    }
  

• justify-self（元素在Grid Cell橫軸上的對齊方式 - 只對單個元素），它一共有四個值：start、end、center、stretch。

    .main {
      display: grid;
      grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item {
      justify-self: start;
    }
  

• align-self（元素在Grid Cell縱軸上的對齊方式 - 只對單個元素生效），同上。

    .main {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }
    .item {
      align-self: start;
    }
  

5：Grid網格布局注意事項

• Grid網格布局適用于頁面整體布局
• Grid容器成員添加float、table-cell、inline-block屬性無效
• 不推薦中文命名， 中文命名會出現亂碼導致name無法匹配