摘要：布局是軸線布局，只能指定項目針對軸線的位置，可以看作是一維布局。可以是一個長度值，一個百分比，或者一個自由空間的一部分使用單位控制自動布局算法的工作方式。

Grid 布局是網站設計的基礎，CSS Grid 是創建網格布局最強大和最簡單的工具。

輕松使用 Grid 布局提高開發效率，對復雜的網頁結構布局更加靈活。

Grid 將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。網格是一組相交的水平線和垂直線，它定義了網格的列和行。我們可以將網格元素放置在與這些行和列相關的位置上。

我們比較熟悉的比如說坐標軸，坐標點；如果你看到上面這樣一個網格首先想到是這不就是被淘汰的表格嗎，表格之所以被淘汰最主要在性能方面，然而我們不得不承認表格對于整個網頁的布局來說有一定的便利性。那么現在的網格布局就可以把表格里面的一些較好的方便的東西抽出來，然后把性能方面較差的地方去掉，所以說網格布局會成為將來互聯網企業的一個熱潮是有原因的。

固定的位置和彈性的軌道的大小

你可以使用固定的軌道尺寸創建網格，比如使用像素單位。你也可以使用比如百分比或者專門為此目的創建的新單位 fr來創建有彈性尺寸的網格。

元素位置

你可以使用行號、行名或者標定一個網格區域來精確定位元素。網格同時還使用一種算法來控制未給出明確網格位置的元素。

創建額外的軌道來包含元素

可以使用網格布局定義一個顯式網格，但是根據規范它會處理你加在網格外面的內容，當必要時它會自動增加行和列，它會盡可能多的容納所有的列。

對齊控制

網格包含對齊特點，以便我們可以控制一旦放置到網格區域中的物體對齊，以及整個網格如何對齊。

控制重疊內容

多個元素可以放置在網格單元格中，或者區域可以部分地彼此重疊。然后可以CSS中的z-index屬性來控制重疊區域顯示的優先級。

Grid 布局與 Flex布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。Flex布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid布局則是將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid布局遠比Flex布局強大。不是說Grid布局取代Flex布局，實際上他倆可以很好的配合使用。

元素應用display:grid;，它是其所有網格項的父元素。

  
1
  
2
  
3
  
4
  
5

把 container 元素變成一個 grid(網格)，只要把其 display 設置為 grid。

CSS代碼：

.container {
    display:grid;
}

網格容器的子元素，下面的item元素是網格項。

  
1
  
2
  
3
  
4
  
5

組成網格項的分界線。

記住:網格線僅僅是我們在定義網格容器的時候就產生的，跟我們的網格項沒有直接的關聯。網格線是我們在定義網格容器的時候伴隨出來的虛擬的概念，也就是說在實際的HTML中是找不到這些線的。

兩個相鄰的網格線之間為網格軌道。

網格軌道的特點是一定會頂到容器的邊緣。
網格軌道必然跟網格項沒有關聯。

兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元。

4個網格線包圍的總空間。

將元素定義為grid container，并為其內容建立新的網格格式化上下文（grid formatting context）。

  
1
  
2
  
3
  
4
  
5

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

grid：生成塊級網格。

inline-grid：生成行內網格。

subgrid：如果網格容器本身是網格項（嵌套網格容器），此屬性用來繼承其父網格容器的列、行大小。

注意

當元素設置了網格布局，column、float、clear、vertical-align屬性無效。
display:subgrid;目前所有瀏覽器都不兼容。

使用以空格分隔的多個值來定義網格的列和行。

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

注意：此屬性用在容器（container）上面。

軌道大小 track-size： 可以使用css長度（px、em等）、百分比、或用分數（用 fr 單位）

網格線名字 line-name：可以選擇任何名字

通過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。

.container {
  grid-template-areas: none|
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "......";
}

grid-area-name：使用 grid-area 屬性設置的網格區域的名稱

"."：點號代表一個空網格單元

none：沒有定義網格區域

例如：

.container {
  grid-template-areas: 
    "head head head head"
    "main main . sidebar"
    "foot foot foot foot";
}

以上例子強調以下幾點：

第一：每一行都一定要用雙引號括起來；

第二：每一個值對應一個網格單元，千萬不要上面寫了4個，下面只寫三個，這樣的話就會出問題；

第三：每個網格單元里的區域名稱都以空格隔開；

第四：每個引號后面是沒有任何逗號或封號，僅僅是回車換行。

在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas的簡寫。就個人而言，還是不要簡寫，因為簡寫之后可讀性會變差一些。

.container {
  grid-template: none | subgrid |  / ;
}

none：將三個屬性都設置為其初始值。所謂初始值默認為一行一列一個區域，也就是說回歸到塊元素本質，就是一個塊。網格布局某些方面來說就是把我們的一個塊給它用一種格子的形式把他區分為多個格子，也可以理解成是多個塊。

subgrid：把 grid-template-rows 和 grid-template-columns 設置為subgrid，并且 grid-template-areas 設置為初始值。簡單強調一下，第一：所謂的把行跟列設置為subgrid就是說還是得自己定義一下行和列，都自己定義了，就不必再簡寫了；第二：把網格區域定義為初始值，就是每個區域的大小都是一個網格單元，如果是這樣其實就沒必要去定義它。subgrid是目前為止所有瀏覽器都不兼容，那么在這里它依然適用，所以跟大家說一下：不推薦大家使用，只需了解知道即可。

grid-template-rows / grid-template-columns：把 grid-template-rows 和 grid-template-columns 設置為指定值，與此同時，設置 grid-template-areas 為none

.container {
  grid-template:
    [row1-start] "head head head" 25px [row1-end]
    [row2-start] "foot foot foot" 25px [row2-end]
    / auto 50px auto;
}

等同于

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "head head head" 
    "foot foot foot";
}

不建議簡寫，避免混淆。

指定網格線的大小，可以想象為設置列/行之間間距的寬度。也可以說是網格軌道之間的間距

.container {
  grid-column-gap: ;
  grid-row-gap: ;
}

line-size：一個長度值

grid-row-gap 和 grid-column-gap 的縮寫。

.container {
  grid-gap:  ;
}

說明

起初是用 grid-gap 屬性來定義的，目前逐漸被 gap 替代。
如果沒有指定 grid-row-gap，則會被設置為與 grid-column-gap 相同的值。

沿著行軸對齊網格內的內容。

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

start：內容與網格區域的左端對齊

end：內容與網格區域的右端對齊

center：內容位于網格區域的中間位置

stretch：內容寬度占據整個網格區域空間（這是默認值）

沿著列軸對齊網格內的內容。

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

start：內容與網格區域的頂端對齊

end：內容與網格區域的底部對齊

center：內容位于網格區域的垂直中心位置

stretch：內容高度占據整個網格區域空間（這是默認值）

設置 justify-items 和 align-items 的簡寫形式。
注意：書寫順序為先列軸屬性值后行軸屬性值。

.container {
  place-items: center;
}

以上表示水平和垂直居中。

設置網格容器內的網格沿著行軸對齊網格的對齊方式。

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

start：網格與網格容器的左邊對齊

end：網格與網格容器的右邊對齊

center：網格與網格容器的中間對齊

stretch：調整 grid item 的大小，讓寬度填充整個網格容器

space-around：在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半

space-between：在 grid item 之間設置均等寬度的空白間隙，其外邊緣無間隙

space-evenly：在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

設置網格容器內的網格沿著列軸對齊網格的對齊方式。

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

start：網格與網格容器的頂部對齊

end：網格與網格容器的底部對齊

center：網格與網格容器的中間對齊

stretch：調整 grid item 的大小，讓高度填充整個網格容器

space-around：在 grid item 之間設置均等高度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半

space-between：在 grid item 之間設置均等高度的空白間隙，其外邊緣無間隙

space-evenly：在每個 grid item 之間設置均等高度的空白間隙，包括外邊緣

設置 align-content 和 justify-content 的簡寫形式。
注意：書寫順序為先列軸對齊屬性值后行軸對齊屬性值。

指定自動生成的網格軌道（又名隱式網格軌道）的大小。

隱式網格軌道

隱式網格軌道在顯示的定位超出指定網格范圍的行或列時被創建。也就是說網格項超出，一種是太多了，還有一種分兩種情況：如果說僅僅因為太多的話，我們只需要控制行就可以了，列這一塊的話肯定是跟著上面是一樣的。但是有時列也會超出，超出情況會在講到網格項的地方提到過，當網格項確定在網格單元或網格區域的時候是可以控制的，控制的時候除了網格區域的名字之外，它也可以通過地址條網格線來控制，但是這個線的名字如果是超過的時候就會出來，那么在這種情況下就會自動生成隱式網格軌道。

隱式網格軌道個人是不建議大家使用的，因為我們的這個隱式網格我們在容器當中一般來說我們在容器中統攬大局然后摳出局部，結果局部不由大局控制反而影響大局，這就有點反客為主，喧賓奪主的意思了，那在控制起來勢必會有混亂，所以隱式網格軌道不是特別提倡大家使用。

.container {
  grid-auto-columns:  ...;
  grid-auto-rows:  ...;
}

track-size：可以是一個長度值，一個百分比，或者一個自由空間的一部分（使用 fr 單位）

控制自動布局算法的工作方式。

.container {
  grid-auto-flow: row | column | row dense | column dense
}

row：告訴自動布局算法依次填充每行，根據需要添加新行 （默認）

column：告訴自動布局算法依次填充每列，根據需要添加新列

dense：告訴自動布局算法，如果后面出現較小的 grid item，則嘗試在網格中填充空洞

注意：dense 只會更改網格項的可視順序，并可能導致它們出現亂序，這對可訪問性不利。

在單個屬性中設置所有以下屬性的簡寫： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。

當然像左對齊、右對齊這些對齊方式等就不能簡寫在上面。就是說我們可以把多少行多少列以及它的區域還有隱式軌道以及他的布局方式都可以簡寫到 grid 里面并且同時將 sets grid-column-gap 和 grid-row-gap設置為他們的初始值，即使它們不能被此屬性顯示設置。

.container {
  grid: none |  /  |  [ [/ ]];
}

none：將所有子屬性設置為其初始值。

grid-template-rows / grid-template-columns：將 grid-template-rows 和 grid-template-columns 分別設置為指定值，將所有其他子屬性設置為其初始值

grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]：接受所有與 grid-auto-flow，grid-auto-rows 和 grid-auto-columns 相同的值。如果省略 grid-auto-columns，則將其設置為 grid-auto-rows指定的值。如果兩者都被省略，則它們被設置為它們的初始值

.container {
  grid: [row1-start] "head head head" 1fr [row1-end]
        [row2-start] "foot foot foot" 25px [row2-end]
        / auto 50px auto;
}

等價于：

.container {
  grid-template-areas: 
    "head head head"
    "foot foot foot";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

簡寫形式就簡單的做一個介紹，實際開發當中不建議簡寫形式。

repeat()

fit-content()

minmax()

跟蹤列表的重復片段，允許大量顯示重復模式的列或行以更緊湊的形式編寫。

.container {
  grid-template-columns: repeat(repeat, values);
  grid-template-rows: repeat(repeat, values);
}

可用范圍：這個函數可以用在 CSS Grid 屬性 grid-template-columns 和 grid-template-rows。

number：整數，確定確切的重復次數。

auto-fill：以網格項為準自動填充。

auto-fit：以網格容器為準自動填充。

length：非負長度。

percentage：相對于列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長度。

flex：單位為 fr 的非負維度，指定軌道彈性布局的系數值。

max-content：表示網格的軌道長度自適應內容最大的那個單元格。

min-content：表示網格的軌道長度自適應內容最小的那個單元格。

auto：作為最大值時，等價于 max-content。作為最小值時，它表示軌道中單元格最小長寬（由min-width/min-height）的最大值。

根據公式min（最大大小、最大值（最小大小、參數））將給定大小夾緊為可用大小。

.container {
  grid-template-columns: fit-content([  |  ]);
  grid-template-rows: fit-content([  |  ]);
}

length：一個絕對的長度。

percentage：相對于給定軸上可用空間的百分比。

定義了一個長寬范圍的閉區間。

minmax([  |  |  | min-content | max-content | auto ],
[  |  |  | min-content | max-content | auto ]);

length：非負長度。

percentage：相對于列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長度。

flex：單位為 fr 的非負維度，指定軌道彈性布局的系數值。

max-content：表示網格的軌道長度自適應內容最大的那個單元格。

min-content：表示網格的軌道長度自適應內容最小的那個單元格。

auto：作為最大值時，等價于 max-content。作為最小值時，它表示軌道中單元格最小長寬（由min-width/min-height）的最大值。

例如：

.container {
  grid-template-columns: minmax(300px, 50px);
}

minmax()這個函數前面‘300px’是最小值，后面‘50px’是最大值，也就是說范圍是從小到大的。當最小值大于最大值時，最大值將被忽略，整列會成為最小值。

start / end ：規定每一個網格項在那個區域當中

grid-area：跟網格區域一樣

self：自身里面的對齊方式

start / end 和 grid-area 兩個屬性都是規劃出一個網格區域，把網格項放在一個網格區域里面，唯一不同的是 start / end 是通過網格線來規劃出網格區域，而 grid-area 是通過網格區域在并列網格容器當中時就定義好的網格區域，然后直接來讀取這個網格區域就可以了。

使用特定網格線來確定 網格項(grid item)在網格內的位置。

.item {
  grid-column-start:  |  | span  | span  | auto
  grid-column-end:  |  | span  | span  | auto
  grid-row-start:  |  | span  | span  | auto
  grid-row-end:  |  | span  | span  | auto
}

屬性值

line ：可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線

span number ：網格項將跨越指定數量的網格軌道

span name ：網格項將跨越一些軌道，直到碰到指定命名的網格線

auto：自動布局，或者自動跨度，或者跨越一個默認的軌道

說明

如果沒有聲明 grid-column-end / grid-row-end，默認情況下，該網格項將跨越1個軌道。

網格項可以相互重疊。可以使用 z-index 來控制它們的堆疊順序。

grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的簡寫形式。

.item {
  grid-column:  /  |  / span ;
  grid-row:  /  |  / span ;
}

個人建議：斜杠前后的空格千萬不要省略，有時可以識別，有時不可識別，對于瀏覽器來說小版本的話就會有差別。建議斜杠前后都要有空格。

屬性值

start-line / end-line：每個值的用法都和屬性分開寫時的用法一樣

例如：

CSS代碼如下：

.container > .item:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

等同于

.container > .item:nth-child(1) {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

等同于

.container > .item:nth-child(1) {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

給 gird item 進行命名以便于使用 grid-template-areas 屬性創建模板時來進行引用。

.item {
  grid-area:  |  /  /  / ;
}

屬性值

name ：grid-template-areas 中定義的命名

row-start / column-start / row-end / column-end：可以是數字，也可以是網格線的名字

例如：

CSS代碼如下：

.container > .item-a {
    grid-area: row1-start / 2 / 3 / five;
}

等同于

.container > .item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}

例如：

CSS代碼如下：

.container > .item-a {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

等同于

.container > .item-a {
    grid-area: 2 / 2 / 4 / 4;
}

沿著行軸對齊 grid-item 里的內容。

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

屬性值

start：將內容對齊到網格區域的左端

end：將內容對齊到網格區域的右端

center：將內容對齊到網格區域的中間

stretch：填充網格區域的寬度（這是默認值）

沿著列軸對齊 grid-item 里的內容。

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

屬性值

start：將內容對齊到網格區域的頂部

end：將內容對齊到網格區域的底部

center：將內容對齊到網格區域的中間

stretch：填充網格區域的高度（這是默認值）

本篇文章到此結束，歡迎提建議哈！

參考文獻：
https://developer.mozilla.org...
https://www.html.cn/archives/...