大家好，我是 CUGGZ。

Grid（網格）布局是最強大的 CSS 布局方案，用于構建二維布局。Grid 布局將頁面劃分成一個個網格，可以任意組合不同的網格，實現各種各樣的布局。下面就來看看 CSS Grid 布局是如何使用的！

1. Grid 布局概述

在解釋 CSS Grid 布局之前，我們先來看看 Grid 布局中一些重要概念。

（1）網格容器

網格容器是所有網格項的父元素，網格容器會定義display:grid。下面例子中，類名為 container 的 div 元素就是網格容器：

.container {
 display: grid;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

（2）網格項

網格項是網格容器的子元素，上面例子中類名為item的div元素就是網格項。

（3）網格線

構成網格結構的水平和垂直分隔線就是網格線，這些線位于列（列網格線）或行（行網格線）的任一側。

下圖中的網格有 9 個網格項，有 4 條行網格線和 4 條列網格線：

（4）網格軌道

兩條相鄰網格線之間的區域就是網格軌道。下圖紫色區域就是網格軌道（紅線圈起來的位置）：

（5）網格單元

兩條相鄰的列網格線和兩條相鄰的行網格線組成是的網格單元。它是網格的單個單元，也是最小單元。下圖紫色區域就是一個單元網格：

（6）網格區域

網格區域就是網格上的一個矩形區域，由一個或多個網格單元組成。下圖中紫色的區域就是網格區域：

2. 設置基本網格

要想創建 CSS 網格布局，首先需要定義網格容器。可以使用display: grid或者display: inline-grid指定一個容器為網格布局。這樣網格容器的所有直接子元素都會隱式轉換為網格項。

.container {
  display: grid;
}

.container {
  display: inline-grid;
}

下面來看一個例子：

<div class="container">
  <div class="box a">1</div>
  <div class="box b">2</div>
  <div class="box c">3</div>
  <div class="box d">4</div>
</div>

在上面的代碼中，我們定義了一個類名為 container 的 div 元素，其有四個子元素。下面來將其設置為網格容器：

.container {
  display: grid;
}

結果如下：

當元素設置了網格布局，column、float、clear、vertical-align屬性都會失效。

3. 設置行和列寬度

將元素單獨設置為網格容器不會立即影響子元素的顯示方式，因為我們還沒有指定布局的央樣式。要更改網格中網格項的布局，就需要明確定義網格的行和列。這就用到了 grid-template-columns 和 grid-template-rows 屬性。

（1）grid-template-columns

可以使用 grid-template-columns 屬性來指定網格容器中所需的列數以及每列的寬度。

該屬性接受一個或多個非負 CSS 長度值，這些值的個數就是網格容器的列數，每個值表示每列（即每個網格軌道）的寬度。例如：

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
}

結果如下：

在這個例子中，我們使用 grid-template-columns 屬性將網格容器的布局設置為三列，每列寬 400px。由于網格容器有四個子元素，而我們只給網格指定了三列，所以當網格容器中的網格項數量超過三個時，CSS 會將其他網格項放到新行中以保持容器的布局。

（2）grid-template-rows

可以使用 grid-template-rows 屬性來指定網格容器中每一行的高度。與 grid-template-columns 屬性不同，它并沒有指定網格容器的行數，而只用來設置每行的高度。這是因為每當網格項換行時，網格容器都會隱式創建一個新行。因此，我們無法使用 grid-template-rows 屬性來控制網格的行數。

該屬性接受一個或多個非負CSS 長度值，其中每個值表示網格容器中每一行的高度，從第一行到最后一行。例如：

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-template-rows: 100px 200px;
}

在上面的代碼中，我們指定了網格容器的第一行高度為 100px，第二行高度為 200px。

結果如下：

上面我們僅設置了網格容器中前兩行的高度。如果向網格容器中添加更多的網格項，那么那些隱式創建的行的高度將不是由 grid-template-rows 屬性決定，而由其內容的大小決定。

（3）grid-template-areas

可以使用grid-template-areas屬性來定義網格區域。該屬性有以下三個屬性值：

• grid-area-name：使用grid-area屬性設置的網格區域的名稱
• . ：空網格單元
• none：沒有定義網格區域

下面來看一個例子：

.container{
    grid-template-areas: "header header header header"
                         "main main . sidebar"
                         "footer footer footer footer";
}

結果如下：

（4）網格線名稱

grid-template-columns 和 grid-template-rows 屬性還可以使用方括號來指定每一條網格線的名字，方便引用。

下面來看一個例子：

.container{
  grid-template-columns: [one] 40px [two] 50px [three] auto [four];
  grid-template-rows: [five] 25% [six] 100px [seven] auto [eight];
}

這里定義了一個 3 行 4 列的網格，其中 one、two、three、four是列網格線的名稱，five、six、seven、eight 是行網格線的名稱。

4. 行和列之間添加間隙

當這樣設置完一個基礎的網格之后，有時想要在網格項之間有一些距離，就可以通過調整網格線的大小在列和行之間添加間距。這就需要用到 row-gap 和 column-gap 屬性。

（1）column-gap

可以使用 column-gap 屬性來通過調整網格容器中垂直網格線的寬度來增加列之間的間距。它接受一個非負 CSS 長度值，該值用來定義每列之間的網格線的寬度。例如：

.container { 
   display: grid; 
   column-gap: 28px;
}

這里將網格容器中每條垂直（列）網格線的寬度設置為了 28px。使得網格中每一列之間的距離增加了28px。

結果如下：

（2）row-gap

可以使用 row-gap 屬性來通過調整網格容器中所有水平網格線的高度來在網格容器中的行之間添加間距。它接受一個非負 CSS 長度值，該值定義每行之間網格線的大小。

例如：

.container { 
   display: grid; 
   column-row: 40px;
}

這里將網格容器中每條水平（行）網格線的高度設置為 40px。使得網格中每一行之間的距離增加了40px。

結果如下：

可以結合 column-gap 和 row-gap 屬性來分隔列和行：

.container { 
   display: grid; 
   column-row: 40px;
   row-gap: 20px;
}

結果如下：

5. 水平對齊內容

Grid  布局提供了六個屬性來控制網格項沿網格容器的行或列的對齊方式。下面就來看看沿網格容器的列水平對齊網格項的屬性都是如何使用的。

（1）justify-items

可以使用 justify-items 屬性來控制所有網格項沿水平方向的對齊方式。它被傳遞給網格容器，其值適用于網格中的所有網格項。它接受四個可能的值：

• start：將網格項對齊到所有列的開頭，即其單元格的左邊緣。

.container {
   justify-items: start;
}

• end：將網格項對齊到所有列的末尾，即其單元格的右邊緣。

.container {
   justify-items: end;
}

• center：將所有網格項目放在其單元格的中心。

.container {
   justify-items: center;
}

• stretch：將拉伸網格項目以填充其單元格的整個寬度（默認值）。

.container {
   justify-items: stretch;
}

（2）justify-content

可以使用justify-content屬性來設置網格在網格容器內沿著水平方向的對齊方式。它接受七個可能的值。

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

.container {
   justify-content: start;
}

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

.container {
   justify-content: end;
}

• center：將整個網格水平放置在網格容器的中心。

.container {
   justify-content: center;
}

• stretch：調整網格項大小，讓寬度填充整個網格容器（默認值）。

.container {
   justify-content: stretch;
}

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

.container {
   justify-content: space-around;
}

• space-between：在網格項之間設置均等寬度空白間隙，其外邊緣無間隙。

.container {
   justify-content: space-between;
}

• space-evenly：在每個網格項之間設置均等寬度的空白間隙，包括外邊緣。

.container {
   justify-content: space-evenly;
}

（3）justify-self

可以使用 justify-self 屬性來設置單元格內容的水平位置，此屬性定義在網格項上，它接受四個可能得值。

• start：將網格項對齊到列的開頭，即其單元格的左邊緣。

.box-1 {
   justify-self: start;
}

• end：將網格項對齊到列的末尾，即其單元格的右邊緣。

.box-2 {
   justify-self: end;
}

• center：單將網格項放置在其單元格的中心。

.box-3 {
   justify-self: center;
}

• stretch：將拉伸網格項以填充整個單元格寬度（默認值）

.box-4 {
   justify-self: stretch;
}

6. 垂直對齊內容

（1）align-items

可以使用align-items 屬性來控制所有網格項沿垂直方向的對齊方式。它被傳遞給網格容器，其值適用于網格中的所有網格項。它接受四個可能的值：

• start：將所有網格項放在所有行的頂部

.container {
   align-items: start;
}

• end：將所有網格項放在所有行的底部。

.container {
   align-items: end;
}

• center：將所有網格項目放在其單元格的中心。

.container {
   align-items: center;
}

• stretch：將拉伸所有網格項目以填充其單元格的整個高度（默認值）。

.container {
   align-items: stretch;
}

（2）align-content

可以使用align-content屬性來設置網格在網格容器內沿著垂直方向的對齊方式。它接受七個可能的值。

• start：將整個網格對齊到網格容器的頂部

.container {
   align-content: start;
}

• end：將整個網格與網格容器的底部對齊。

.container {
   align-content: end;
}

• center：將整個網格垂直放置在網格容器的中心

.container {
   align-content: center;
}

• stretch：網格項目拉伸以填充容器網格的整個高度（默認值）。

.container {
   align-content: stretch;
}

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

.container {
   align-content: space-around;
}

• space-between：在網格項之間設置均等寬度空白間隙，其外邊緣無間隙。

.container {
   align-content: space-between;
}

• space-evenly：在每個網格項之間設置均等寬度的空白間隙，包括外邊緣。

.container {
   align-content: space-evenly;
}

（3）align-self

可以使用 align-self 屬性來設置單元格內容的垂直位置，此屬性定義在網格項上，它接受四個可能得值。

• start：在其單元格的頂部放置一個網格項

.box-4 {
   align-self: start;
}

• end：在其單元格的底部放置一個網格項。

.box-5 {
   align-self: end;
}

• center：將一個網格項放置在其單元格的中心。

.box-6 {
   align-self: center;
}

• stretch：將拉伸網格項目以填充其單元格的整個高度（默認值）。

.box-1 {
  align-self: stretch;
}

7. 新的測量單位

除了非負CSS 長度值（例如px、rem、vw和百分比 ( %) ）之外，我們還可以使用特殊的大小單位和關鍵字來控制網格中網格項的大小。

（1）fr 單位

fr單位是“fractional”的縮寫，是 CSS 網格布局中引入的長度單位。它代表網格容器中可用空間的一部分。這使它成為定義響應列和行的理想單位，這些列和行將隨著瀏覽器的視口縮小和增大而縮放。

下面來看一個簡單的例子，假設我們要創建一個由三列組成的網格布局，其中第一列占網格寬度的 1/6，第二列是第一列寬度的兩倍，第三列是第一列寬度的三倍。如果沒有fr 單位，我們就需要執行一些數學運算，先用網格的總寬度100%除以6，然后將結果乘以每列的跨度：

• 第一列的寬度 = 100% / 6 * 1 —> 15%
• 第二列的寬度 = 100% / 6 * 2 —> 30%
• 第三列的寬度 = 100% / 6 * 3 —> 45%

隨著布局變得越來越復雜，使用百分比或任何CSS 數學函數將變得不可持續。這時 fr 單位就派上用場了。fr單位通過讓我們指定網格容器中的可用空間應如何在其行和列之間進行分配，然后按該順序分配可用空間：

.container {
   display: grid;
   grid-template-columns: 1fr 2fr 3fr;
}

上面的代碼中，我們將容器寬度的一部分分給第一列，第二列的寬度是第一列的兩倍，第三列的寬度是第一列的三倍。

結果如下：

（2）min-content

min-content 是一個用于調整大小的關鍵字，它將網格軌跡的寬度設置為最小寬度，通常是網格項中最小內容或文本的大小。它的工作原理類似于CSS函數：min()，但被用作間距單位而不是函數。

當應用于列或行時，它們會變得與軌跡中最長的內容一樣窄。這可以獲得網格項內內容的最短長度。

下面來看一個例子；

.container {
   display: grid;
   grid-template-columns: 1fr min-content 1fr;
}

在上面的代碼中，我們將第一列和第三列的寬度設置為網格容器的小部分，同時將第二列設置為 min-content，使其縮小到網格項中內容的大小。

結果如下：

（3）max-content

max-content關鍵字的效果與min-content相反，它類似于CSS函數：max()。當應用于列或行時，軌道將變得盡可能寬，以便網格項中的所有內容都顯示在一條完整的長行中。

使用max-content的好處就是，可以讓網格項中的內容擴展，而不是將它們包裝成新行，這會導致垂直文本溢出。

下面來看一個例子：

.container {
   display: grid;
   grid-template-columns: 1fr max-content 1fr;
}

上面的代碼定義了三列，并將第二列的寬度設置為max-content關鍵字。如果在第二列的網格項中添加大量內容，這些網格項中的文本將不會溢出。相反，第二列的寬度將增加，第一列和第三列將縮小以適應它。

結果如下：

8. CSS函數

在使用 CSS Grid 進行布局時，一些CSS數學函數可以幫助我們提高效率。比如 repeat() 、minmax()、fit-content()。

（1）repeat()

repeat() 函數表示軌道列表的重復片段，允許以更緊湊的形式寫入大量顯示重復模式的列或行。。

例如，在使用grid-template-columns和grid-template-rows這兩個屬性時，可以使用 repeat() 函數更簡潔地聲明這些重復模式。

該函數有兩個參數：① 第一個參數用來指定行或列的重復模式重復的次數，有三種取值方式：

• <number>：整數，確切的重復次數。
• <auto-fill>：以網格項為準自動填充。
• <auto-fit>：以網格容器為準自動填充。

第二個參數用來指定行或列的重復模式重復的內容，有以下取值方式：

• <length>：非負長度。
• <percentage>：相對于列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長寬。
• <flex>：單位為fr的非負長度，指定軌道彈性布局的系數值。
• max-content：表示網格的軌道長度自適應內容最大的那個單元格。
• min-content：表示網格的軌道長度自適應內容最小的那個單元格。
• auto：作為最大值時，等價于max-content。作為最小值時，它表示軌道中單元格最小長寬(min-width/min-height)的最大值。

假設我們要創建一個具有六個相等列的網格。如果沒有 repeat() 函數，我們必須使用 grid-template-columns 屬性顯式定義每個列。代碼如下：

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

然而，隨著列數的增加，這種方法變得不可持續和冗長。我們可以使用repeat()函數將其重寫為更緊湊的形式。代碼如下：

.container {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
}

結果如下：

（2）minmax()

定義響應式網格布局時，我們可能希望為每個網格軌道指定最小和最大寬度，以確保它們在視口調整大小時上下縮放以適應其內容。這時 minmax() 就派上用場了。

minmax() 函數允許我們指定網格軌道的最小和最大尺寸，它是一個長寬范圍的閉區間。當網格在視口中調整大小時，網格軌道將在該范圍內增長和縮小。在較小的屏幕上，它會縮小直到達到最小尺寸。在更大的屏幕上，它會拉伸直到達到最大尺寸。

minmax() 函數接受 CSS Grid 大小單位、關鍵字、長度和百分比值。其有兩個參數：

• min：軌道的最小尺寸。
• max：軌道的最大尺寸。

下面來看一個例子：

.container {
  display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, minmax(100px, max-content));
}

在上面的代碼中，我們使用 minmax() 函數將網格容器中兩行的最小高度設置為 100px，將最大高度設置 max-content。這樣就可以確保每一行在超過 100px 時都能伸展并變得盡可能寬，以容納其內容。

結果如下：

minmax() 函數的一個顯著優點就是它減少了對媒體查詢的需要。它不依靠媒體查詢來控制跨視口的網格軌道（列和行）的大小，而是允許在一定程度上設置網格軌道值的響應式轉換。

（3）fit-content()

fit-content() 函數的操作類似于 minmax() 函數。不同之處在于，使用 fit-content() 時，最小值是網格項中內容的大小，最大值是我們傳遞給它的值。這樣就可以將內容設置為最小值，并根據需要將其放大到某個值。

當應用于網格軌道時，它將網格軌道的大小設置為最小寬度，這是其網格項目中最小的內容或文本的大小。需要注意的是，最小的內容或文本大小不大于函數中指定的值。

但是，如果最小寬度的值超過了提供給函數的值，則網格軌道的大小將設置為傳遞給 fit-content() 函數的值，并且網格項的內容將換行。

下面來看一個例子：

.container {
   display: grid;
   grid-template-columns: fit-content(200px) fit-content(300px) fit-content(400px);
}

上面的代碼使用 fit-content() 函數分別創建了寬度為 200px、300px 和 400px 的三列。這意味著每列的大小將等于其網格項目中最小的內容或文本的大小，但如果這變得大于提供給 fit-content() 函數的值，則列將設置為傳遞給 fit-content() 函數的值。

結果如下：

9. 網格項屬性

在網格容器中，每條網格線都根據其在網格上的位置給出一個編號。第一條網格線（行或列）的編號為 1，第二條為 2，依此類推。

例如，下圖在一個三列兩行的網格容器上存在的網格線的數量，其中列線是橙色圓圈內從 1 到 4 的數字，而行線是藍色圓圈內的數字從 1 到 3 圈。

瀏覽器使用這些網格線來控制網格中項目的布局和位置。CSS Grid 提供了一些屬性來控制網格項目沿這些網格線的位置，以及它們在水平和垂直方向上跨越的寬度。

可用于控制網格項的位置以及它們如何跨越這些行的屬性是：

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

（1）grid-column-start

可以使用 grid-column-start 屬性來指定網格項沿網格容器內的列網格線的水平起始位置。這個開始位置定義了網格項目左邊緣的開始。

使用下面的網格布局，來定位第一個網格項并將其水平起始位置設置為第 2 列。

選擇第一個子元素，并定位：

.container div:nth-of-type(1) {
  grid-column-start: 2;
}

這樣，所選網格項的水平起始位置將位于第二條垂直網格線（第 2 列）上。

上圖中，第一個網格項現在從第 2 列開始，而其他網格項被移動，換行到了新行或在網格上創建了空白空間。

（2）grid-column-end

除了使用 grid-column-start 指定網格項的水平起始位置外，還可以使用 grid-column-end 屬性設置網格項的結束位置。

例如：

.container div:nth-of-type(1) {
  grid-column-start: 2;
  grid-column-end: 4;
}

這使得第一個網格項從第 2 列開始，跨越兩條網格線，并在第 4 行結束。使用 grid-column-start 和 grid-column-end 屬性，可以有效地控制網格的水平起始位置以及它跨越網格的寬度。

結果如下：

（3）grid-row-start

可以使用 grid-row-start 屬性來指定網格項沿網格容器內水平（行）網格線的垂直起始位置。它用于設置網格項開始的行。

例如：

.container div:nth-of-type(2) {
  grid-row-start: 1;
}

在上面的代碼中，使用 grid-row-start屬性將第二個 div 元素的垂直起始位置設置為第 1 行。

結果如下：

（4）grid-row-end

可以使用 grid-row-end 屬性來指定網格項沿網格容器內水平（行）網格線的垂直結束位置。

例如：

.container div:nth-of-type(2) {
   grid-row-start: 1;
   grid-row-start: 4;
}

這使得第二個網格項從第一行開始，跨越三個網格線，在第 4 行結束。使用 grid-row-start 和 grid-row-end 屬性，可以有效地控制網格項的垂直起始位置及其在網格中的高度。

結果如下：

（5）其他

上面的四個屬性使用特定的網格線來確定網格項在網格內的位置，它們的屬性值有以下幾種：

• <line>：可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線。
• span <number>：網格項將跨越指定數量的網格軌道。
• span <name>：網格項將跨越一些軌道 ，直到遇到指定命名的網格線。
• auto：自動布局，或者自動跨越，或者跨越一個默認的軌道。

下面來看一個例子：

.container div:nth-of-type(1) {
  grid-column-start: span 2;
}

這里使用 span 來表示第一個單元格跨越了2個網格。

結果如下：

下面來結合使用上面的四個屬性：

.container div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

結果如下：

10. 隱式網格軌道

當我們設置的網格不足以放下所有的網格項時，就會自動出現一些網格軌道，這些多出來的行的高度是auto的，可以使用grid-auto-columns和 grid-auto-rows 屬性來指定自動生成的網格軌道（又稱為隱式網格軌道）的大小。

例如：

.container {
   display: grid;
   grid-auto-columns: 100px
   grid-auto-rows: 80px
}

這里， grid-auto-columns 屬性指定了隱式創建的網格垂直方向軌道的寬度為 100px，grid-auto-rows 屬性指定了隱式創建的網格水平方向軌道的高度為 80px。

11. 速記屬性

像大多數 CSS 屬性一樣，CSS Grid 提供了一些速記屬性，它們提供了一種更短、更先進的方式來同時設置多個 CSS Grid 屬性的值。使用這些速記屬性，我們就可以編寫更簡潔 更易讀的樣式，從而節省開發時間。下面就來看看這些屬性。

（1）gap

column-gap 和 row-gap 屬性用來設置網格之前的距離，即網格線的寬度。可以通過 gap 屬性簡寫這兩個屬性，其語法如下：

gap: <row-gap> <column-gap>

其中 <column-gap> 是一個可選值，如果省略，則設置為與 <row-gap> 相同的值。下面來看一個例子：

.container {
   display: grid;
   gap: 20px;
}

這在網格容器中的所有列和行之間都添加了 20px 的空間，與下面的代碼等價：

.container { 
 display: grid; 
 column-row: 20px;
 row-gap: 20px;
}

（2）place-items

place-items 用來設置 align-items 和 justify-items 屬性的值，它能夠同時控制所有網格項目的水平和垂直對齊。

它接受兩個值：第一個值設置 align-items 屬性的值，第二個值設置 justify-items 屬性的值。如果未指定第二個值，則將第一個值指定為兩個屬性的值。

例如：

.container { 
 display: grid; 
 place-items: center; 
}

這會將 align-items 和 justify-items 屬性的值都設置為 center，將所有網格項放置在其網格區域的中心。

（3）place-content

place-content 用來設置網格屬性 align-content 和 justify-content 的值，它能夠同時控制網格容器內整個網格的水平和垂直對齊方式。

它接受兩個值：第一個值設置 align-content 屬性的值，第二個值設置 justify-content 屬性的值。如果未指定第二個值，則將第一個值指定為兩個屬性的值。

例如：

.container { 
 display: grid; 
 place-content: center; 
}

這樣就會將 align-content 和 justify-content 屬性的值都設置為 center，使整個網格在網格容器中水平和垂直居中。

（4）place-self

place-items 可以設置 align-self 和 justify-self 屬性的值。它能夠控制單個網格項目在其網格區域內的水平和垂直對齊方式。

它接受兩個值：第一個值設置 align-self 屬性的值，第二個值設置 justify-self 屬性的值。如果未指定第二個值，則將第一個值指定為兩個屬性的值。

例如：

.item { 
   place-self: end center;
}

在上面的代碼中，align-self 屬性的值設置為end，這會將網格項垂直向下推到其網格單元格的底部。justify-self 屬性設置為 center，將網格項目水平放置在其單元格的中心。

結果如下：

（5）grid-column

grid-column 是 grid-column-start 和 grid-column-end 屬性的簡寫屬性。它可以指定網格項沿網格容器內的列網格線的水平起始位置以及網格項應該結束的位置。

grid-column的語法如下：

grid-column: column-start / column-end;

grid-column 屬性接受兩個由斜線 (/) 分隔的網格線值，其中：

• 第一個值 column-start 是 grid-column-start 屬性的值。
• 第二個值 column-end 是 grid-column-end 屬性的值。
• 斜杠 (/) 用作這兩個值之間的分界線，因為兩者都可以包含一個或多個空格。因此，需要通過斜線來消除錯誤和歧義。此外，作為最佳實踐，建議在斜杠 (/) 的兩側添加一哥空格，以使 CSS 更具可讀性。

例如：

.gird-item {
  grid-column: 1 / 3;
}

上面的代碼告訴網格項從網格中的第 1 列水平跨越到第 3 列，與下面的代碼等價：

.gird-item {
  grid-column-start: 1;
  grid-column-end: 3;
}

（6）grid-row

grid-row 屬性的工作方式與 grid-column 屬性一樣。它是 grid-row-start 和 grid-row-end 屬性的簡寫屬性。它可以指定網格項沿網格容器中的行網格線的垂直起始位置，以及網格項應該在網格中的何處結束。

例如：

.gird-item {
  grid-column: 2 / 5;
}

這就會使得網格項的高度從網格中的第 2 行向下跨越到第 5 行。

grid-column 和 grid-row 屬性中也可以使用 span 關鍵字，以下兩者是等效的：

.gird-item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.gird-item {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

斜杠后面的部分可以省略，表示跨越第一個網格。

（7）grid-template

grid-template-columns、grid-template-rows、grid-template-areas這三個屬性可以簡寫在grid-template屬性中。

grid-template屬性有三個屬性值：

• none：將三個屬性都設置為其初始值，即一行一列一個單元格；
• subgrid：把grid-template-columns和grid-template-rows設置為subgrid，并且把grid-template-areas設置為初始值；
• grid-template-rows/grid-template-columns：將grid-template-columns和grid-template-rows設為指定值，而grid-template-areas設置為none。

（8）grid-area

grid-area 屬性指定網格元素在網格布局中的大小和位置，它是grid-row-start、grid-column-start、grid-row-end、grid-column-end屬性的合并簡寫形式，其語法如下：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

對于下面這段代碼：

.container div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

可以簡寫成這樣：

.container div:nth-of-type(1) {
  grid-area: 2 / 1 / 4 / 3;
}

除此之外，grid-area 屬性還可以對網格元素進行命名。命名的網格元素可以通過容器的 grid-template-areas 屬性來引用。

下面來看一個例子：

.item1 { grid-area: header; }
.item2 { grid-area: main; }
.item3 { grid-area: sideber; }
.item4 { grid-area: footer; }
 
.container {
  grid-template-areas:
    'header header header'
    'menu main sideber'
    'footer footer footer';
}

結果如下：

（9）grid

grid 屬性可以為每個顯式網格容器屬性（例如 grid-template-rows、grid-template-columns 和 grid-template-areas）以及每個隱式網格容器屬性設置一個值（例如 grid-auto-rows、grid-auto-columns 和 grid-auto-flow）在一個聲明中。

grid 屬性的語法如下：

<grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

12. CSS Grid 調試

上面我們介紹了如何定義 CSS Grid 布局，那該如何調試呢？Chrome DevTools 支持對 Grid 布局進行提示。如果一個元素是 Grid 布局，在 DevTools 的 Elements 面板中，Grid 布局的容器元素上就會顯示一個 grid 的標識，如下：

點擊這個 grid 標志，頁面的 grid 網格就會顯示數網格區域以及網格線，并且會為網格線進行編號，如下：

下面切換到 Layout 選項卡，就可以看到 Grid 布局的一些選項，我們可以設置頁面上是否顯示軌道的寬度/高度，是否展示網格區域的名稱，是否顯示網格線的延長，是否顯示網格線的名稱。除此之外，還會顯示當前頁面上所有使用 Grid 布局的地方，可以進行顯示隱藏：

通過這些選項，就可以對 CSS Grid 布局進行調試了。

13. CSS Grid 生成器

最后來分享幾個實用的 CSS Grid 生成器。通過這些生成器，可以可視化得調整 Grid 布局，最終會拿到生成的 Grid 布局代碼。

（1）CSS Grid Generator

在線體驗：https://cssgrid-generator.netlify.app/

（2）CSS Layout Generator

在線體驗：https://layout.bradwoods.io/customize。

（3）Grid LayoutIt

在線體驗：https://grid.layoutit.com/。

（4）Griddy

在線體驗：https://griddy.io/。

（5）Cssgr.id

在線體驗：https://cssgr.id/。