1、CSS Grid(網格) 布局

CSS Grid 網格布局可以將網格元素放置在與這些行和列相關的位置上，進而快速、便捷的對頁面結構進行布局，提高工作效率。

“flexbox” 是一維的布局，是因為一個 “flexbox container” 一次只能處理一個維度上的元素布局，一行或者一列。

相比較 “Grid網格布局”，則是二維布局可以同時處理行和列上的布局，用于布局頁面主要的區域布局或小型組件。

1.1、兼容

ie10、ie11支持帶前綴-ms-

1.2、基本概念

1.2.1、容器與項目

采用網格布局的區域，稱為"容器"（container）。 容器內部采用網格定位的子元素，稱為"項目"（item）。

1.2.2、行和列

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

1.2.3、單元格

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

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

1.2.4、網格線

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

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

1.3、網格屬性

Grid 布局的屬性分成兩類。一類定義在容器上面，稱為容器屬性；另一類定義在項目上面，稱為項目屬性。

1.3.1、容器屬性

1.3.1.1、設置為網格布局

• 設置為塊級網格

 div {
   display: grid;
 }

• 設置為行級網格

 div {
   display: inline-grid;
 }

注意：

• 不是網格的直接子元素，不參與網格布局

• 設為網格布局以后，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。

1.3.1.2、列寬與行高

grid-template-columns網格布局中列的數量（和寬度）

grid-template-rows網格布局中行的數量（和高度）

語法：

• 空格隔開的一組值列表

• 其中每個值指定相應列的寬度/行的高度。

取值:

• 默認值none

• 絕對單位px

   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%;
   }

• fr 關鍵字

  fraction 的縮寫,意為部分

• 彈性系數，按比例分配剩余空間（如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍）

• 可以與絕對長度的單位結合使用

• auto 關鍵字

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

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

• minmax()

• 函數產生一個長度范圍，表示長度就在這個范圍之中。它接受兩個參數，分別為最小值和最大值.

  即空間不足時以最小以min顯示，空間有剩余時最大按max顯示

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

• repeat()函數

   grid-template-columns: repeat(2, 100px 20px 80px);
   定義了6列，第一列和第四列的寬度為100px，第二列和第五列為20px，第三列和第六列為80px。

• 簡化重復的值：接受兩個參數，第一個參數是重復的次數（上例是3），第二個參數是所要重復的值。

• 重復某種模式：

• auto-fill 關鍵字

   單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納盡可能多的單元格時使用。

   grid-template-columns:repeat(auto-fill,100px);
   表示每列寬度100px，然后自動填充，直到容器不能放置更多的列。

1.3.1.3、設置行與行的間隔（行間距）

column-gap屬性設置列與列的間隔（列間距）；row-gap屬性設置行與行的間隔（行間距）。

取值：

• 默認值 0  

• px

• 百分比（相對于容器）

簡寫grid-gap：

• gap: 行間距 列間距； 【空格】隔開

• 省略了第二個值，瀏覽器認為第二個值等于第一個值

1.3.1.4、總網格區域在容器垂直位置,水平位置

justify-content水平位置  總網格區域相對于容器左右對齊方式(網格內容大小小于容器寬時) align-content 位置  總網格區域相對于容器上下對齊方式(網格內容大小小于容器高時)  

取值：

• start - 對齊容器的起始邊框。

• end - 對齊容器的結束邊框。

• center - 容器內部居中。

• stretch - 項目大小沒有指定時，拉伸占據整個網格容器。

• space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。

• space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

• space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。

簡寫：

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

• place-content:垂直 水平 【空格】隔開

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

1.3.1.5、設置單元格內容的垂直、水平位置

justify-items 水平位置:內容相對于單元格左右對齊方式(通常項目內容大小小于單元格寬度時)

align-items 垂直位置:內容相對于單元格上下對齊方式(通常項目內容大小小于單元格高度時)

取值：

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

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

• center：單元格內部居中。

• stretch：拉伸，占滿單元格的整個寬度（默認值）

簡寫：

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

• place-items: 垂直 水平; 【空格隔開】