網格佈局（Grid）

　　它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。

　　Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格。Grid 佈局遠比 Flex 佈局強大。

使用 ：

　　同flex佈局一樣，需要display: grid指定一個容器採用網格佈局。

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

容器 屬性

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

1 
//三行三列 寬高100px
.container {
2   display: grid;
3   grid-template-columns: 100px 100px 100px;
4   grid-template-rows: 100px 100px 100px;
5 }

• repeat() 設定重複 接受兩個引數，第一個引數是重複的次數（上例是3），第二個引數是所要重複的值。 如：grid-template-columns: repeat(2, 100px 20px 80px);
• auto-fill 關鍵字 希望每一行（或每一列）容納儘可能多的單元格grid-template-columns: repeat(auto-fill, 100px)
• fr 關鍵字如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。

  grid-template-columns: 150px 1fr 2fr;第一列的寬度為150畫素，第二列的寬度是第三列的一半。

• minmax()　　產生一個長度範圍，表示長度就在這個範圍之中

  grid-template-columns: 1fr 1fr minmax(100px, 1fr);其中minmax(100px, 1fr)表示列寬不小於100px，不大於1fr。

• auto關鍵字 表示由瀏覽器自己決定長度。
• 網格線的名稱 可以使用方括號，指定每一根網格線的名字，方便以後的引用。

    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
   
  

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

• grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式 grid-gap: <grid-row-gap> <grid-column-gap>;

• grid-template-areas 屬性 用於定義區域。

   grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';

• grid-auto-flow 屬性

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

  • grid-auto-flow: column dense;//預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"，dense儘量不產生空行

• justify-items屬性設定單元格內容的水平位置（左中右），align-items屬性設定單元格內容的垂直位置（上中下）。
  • start：對齊單元格的起始邊緣。
  • end：對齊單元格的結束邊緣。
  • center：單元格內部居中。
  • stretch：拉伸，佔滿單元格的整個寬度（預設值）。
  • place-items: <align-items> <justify-items>;
• justify-content屬性是整個內容區域在容器裡面的水平位置（左中右），align-content屬性是整個內容區域的垂直位置（上中下）。

• justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

• align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

• grid-auto-columns屬性和grid-auto-rows屬性用來設定，瀏覽器自動建立的多餘網格的列寬和行高。

  grid-auto-rows: 50px; //多出的格子高為50px

專案屬性

• 專案的位置是可以指定的，具體方法就是指定專案的四個邊框，分別定位在哪根網格線。
• grid-column-start屬性：左邊框所在的垂直網格線
• grid-column-end屬性：右邊框所在的垂直網格線
• grid-row-start屬性：上邊框所在的水平網格線
• grid-row-end屬性：下邊框所在的水平網格線
• 這四個屬性的值還可以使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。

   grid-column-start: span 2;//左邊框距離右邊框跨越2個網格

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

• 簡寫 grid-column: <start-line> / <end-line>;
    grid-row: <start-line> / <end-line>;

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

   grid-area: e;//放在e區域

  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;//直接指定位置

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

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