網格佈局grid

它與傳統的佈局方案，包括前面介紹的 Flex 佈局方案相比的特性在於：

• 它是第一個真正意義上的佈局系統，其主要表現在它是第一個基於二維方向的佈局模組

• 它是第一個基於網格（或者叫柵格，本文叫網格）的原生布局系統

網格容器(container)上可以設定的屬性有

1. display: grid || inline-grid || subgrid

   和 Flex 類似，Grid 的使用同樣簡單，第一步，我們需要把某個容器指定成網格容器：

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

   這個時候，.grid 就變成了一個 網格容器（Grid Conatainer）

   ，包含在這個容器中的子元素則自動變成了 網格項(Grid Items)， Grid 的所有屬性都在兩個概念之間展開。

2. grid-template-columns 和 grid-template-rows

   設定行的個數和高度，列的個數和寬度

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

   
   repeat(個數，值) 重複方法

   grid-template-columns: 200px 1fr repeat(3, 100px);
   ​
   .grid {
       display: grid; 
       grid-template-columns: 1fr  auto; auto表示自動分配 
       grid-template-rows: 1fr 1fr 1fr;
     
   }
   .grid {
       display: grid; 
       grid-template-columns: 100px 100px 100px;
       grid-template-rows: 1fr 1fr 1fr;
   ​
   }
   ​
   .grid {
       display: grid; 
       grid-template-columns: 100px minmax(200px,auto);
       grid-template-rows: 1fr 1fr 1fr;
     
   }
    
   

   
   minmax(min,max)最大最小值區間​
   ​
   

   .grid {
       display: grid; 
       grid-template-columns: 33.33% 33.33% 33.33%;
       grid-template-rows: 1fr 1fr 1fr;
      
   }
   ​

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

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
       
     // grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
   }
   ​
    
   

   grid-template-columns 和 grid-template-rows 分別表示水平方向上和垂直方向上網格項的空間分配比例，fr 是一個新單位，表示佔據可用空間的一等分。所以上面的程式碼表示，在水平和垂直方向分別把可用空間分為三份，且三份佔據空間相等

3. grid-auto-columns 和 grid-auto-rows

   有時候，一些專案的指定位置，在現有網格的外部。比如網格只有3列，但是某一個專案指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置專案。

   它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。(指定超出網格外部的元素大小)

4. grid-auto-flow劃分網格以後，容器的子元素會按照順序，自動放置在每一個網格。預設的放置順序是"先行後列"，即先填滿第一行，再開始放入第二行，即下圖數字的順序。這個順序由grid-auto-flow屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。

5. grid-auto-flow: column/row/row-dense/column-dense;

6. grid-column-gap 和 grid-row-gap 以及兩者合寫 grid-gap

grid-gap 用來設定網格間距，也就是兩個網格之間留出來的空白，其可以在橫向和縱向分別通過 grid-column-gap 和 grid-row-gap 來設定相應的大小，這兩個屬性值通常可以合寫為 grid-gap：

.grid {
  grid-gap: 20px 10px;   //20px row-gap 10px column-gap
}

在橫向設定 10px 的間距，縱向設定 20px 的間距，如果，橫向和縱向要設定的大小一致時，可以直接縮寫為一個值： grid-gap: 20px;

1. align-items

   align-items 與後者相同道理，不再贅述

2. justify-items

   屬性是整個專案內容在單元格里面的水平位置（左中右）

   .grid {
     justify-items: start | end | center | stretch(預設值) 填滿;
   }
   屬性值介紹：
   ​
   stretch: 預設值，內容充滿整個網格區域
   start：網格項內容與網格區域左側對齊
   end: 網格項內容與網格區域右側對齊
   center: 網格項內容在網格區域居中顯示
   ​
   ​

3. justify-content

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

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

4. align-content

   與上面的justify-content屬性值完全相同 只是排列方向變成了垂直方向

5. grid-template-areas

   劃分容器的區域

   grid-template-areas: "header header header"
                        "siderbar content content"
                        "footer footer footer";

網格項(item)上面可以設定的屬性有：

1. grid-column-start

2. grid-column-end

   .item1 {
     grid-column-start: 1;
     grid-column-end: 3
   }
   grid-column-start, grid-column-end，分別表示該網格項開始和結束的網格線序號，其值是代表網格線的編號。

3. grid-row-start

4. grid-row-end

   豎直方向同理，使用 grid-row-start 和 grid-row-end 兩個屬性實現

   .item1 {
     grid-row-start: 2;
     grid-row-end: 4;
   }

   這兩組屬性同樣有相應的縮寫形式，我們把 grid-column-start, grid-column-end 合寫為 grid-column，把 grid-row-start 和 grid-row-end 合寫為 grid-row，其值用一個 / 來分隔。

5. grid-column（1 和 2 的合寫形式）

   除了在網格容器上統一進行的設定，我們可以針對特定的網格項進行設定，決定其佔據的網格區域，我們可以藉助網格線的約束，來決定某一個網格項的空間

6. gird-row（3 和 4 的合寫形式）

   grid-column: 1/3;
   grid-row: 2/4;

7. grid-area

   將專案放在某個特定區域內 覆蓋關係可以用z-index實現 與grid-row grid-column的兩個屬性功能相同

8. justify-self

9. align-self

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

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

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