大家好，我是 CUGGZ。

Grid（網(wǎng)格）布局是最強(qiáng)大的 CSS 布局方案，用于構(gòu)建二維布局。Grid 布局將頁(yè)面劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，實(shí)現(xiàn)各種各樣的布局。下面就來(lái)看看 CSS Grid 布局是如何使用的！

1. Grid 布局概述

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

（1）網(wǎng)格容器

網(wǎng)格容器是所有網(wǎng)格項(xiàng)的父元素，網(wǎng)格容器會(huì)定義display:grid。下面例子中，類名為 container 的 div 元素就是網(wǎng)格容器：

.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）網(wǎng)格項(xiàng)

網(wǎng)格項(xiàng)是網(wǎng)格容器的子元素，上面例子中類名為item的div元素就是網(wǎng)格項(xiàng)。

（3）網(wǎng)格線

構(gòu)成網(wǎng)格結(jié)構(gòu)的水平和垂直分隔線就是網(wǎng)格線，這些線位于列（列網(wǎng)格線）或行（行網(wǎng)格線）的任一側(cè)。

下圖中的網(wǎng)格有 9 個(gè)網(wǎng)格項(xiàng)，有 4 條行網(wǎng)格線和 4 條列網(wǎng)格線：

（4）網(wǎng)格軌道

兩條相鄰網(wǎng)格線之間的區(qū)域就是網(wǎng)格軌道。下圖紫色區(qū)域就是網(wǎng)格軌道（紅線圈起來(lái)的位置）：

（5）網(wǎng)格單元

兩條相鄰的列網(wǎng)格線和兩條相鄰的行網(wǎng)格線組成是的網(wǎng)格單元。它是網(wǎng)格的單個(gè)單元，也是最小單元。下圖紫色區(qū)域就是一個(gè)單元網(wǎng)格：

（6）網(wǎng)格區(qū)域

網(wǎng)格區(qū)域就是網(wǎng)格上的一個(gè)矩形區(qū)域，由一個(gè)或多個(gè)網(wǎng)格單元組成。下圖中紫色的區(qū)域就是網(wǎng)格區(qū)域：

2. 設(shè)置基本網(wǎng)格

要想創(chuàng)建 CSS 網(wǎng)格布局，首先需要定義網(wǎng)格容器。可以使用display: grid或者display: inline-grid指定一個(gè)容器為網(wǎng)格布局。這樣網(wǎng)格容器的所有直接子元素都會(huì)隱式轉(zhuǎn)換為網(wǎng)格項(xiàng)。

.container {
  display: grid;
}

.container {
  display: inline-grid;
}

下面來(lái)看一個(gè)例子：

<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>

在上面的代碼中，我們定義了一個(gè)類名為 container 的 div 元素，其有四個(gè)子元素。下面來(lái)將其設(shè)置為網(wǎng)格容器：

.container {
  display: grid;
}

結(jié)果如下：

當(dāng)元素設(shè)置了網(wǎng)格布局，column、float、clear、vertical-align屬性都會(huì)失效。

3. 設(shè)置行和列寬度

將元素單獨(dú)設(shè)置為網(wǎng)格容器不會(huì)立即影響子元素的顯示方式，因?yàn)槲覀冞€沒(méi)有指定布局的央樣式。要更改網(wǎng)格中網(wǎng)格項(xiàng)的布局，就需要明確定義網(wǎng)格的行和列。這就用到了 grid-template-columns 和 grid-template-rows 屬性。

（1）grid-template-columns

可以使用 grid-template-columns 屬性來(lái)指定網(wǎng)格容器中所需的列數(shù)以及每列的寬度。

該屬性接受一個(gè)或多個(gè)非負(fù) CSS 長(zhǎng)度值，這些值的個(gè)數(shù)就是網(wǎng)格容器的列數(shù)，每個(gè)值表示每列（即每個(gè)網(wǎng)格軌道）的寬度。例如：

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

結(jié)果如下：

在這個(gè)例子中，我們使用 grid-template-columns 屬性將網(wǎng)格容器的布局設(shè)置為三列，每列寬 400px。由于網(wǎng)格容器有四個(gè)子元素，而我們只給網(wǎng)格指定了三列，所以當(dāng)網(wǎng)格容器中的網(wǎng)格項(xiàng)數(shù)量超過(guò)三個(gè)時(shí)，CSS 會(huì)將其他網(wǎng)格項(xiàng)放到新行中以保持容器的布局。

（2）grid-template-rows

可以使用 grid-template-rows 屬性來(lái)指定網(wǎng)格容器中每一行的高度。與 grid-template-columns 屬性不同，它并沒(méi)有指定網(wǎng)格容器的行數(shù)，而只用來(lái)設(shè)置每行的高度。這是因?yàn)槊慨?dāng)網(wǎng)格項(xiàng)換行時(shí)，網(wǎng)格容器都會(huì)隱式創(chuàng)建一個(gè)新行。因此，我們無(wú)法使用 grid-template-rows 屬性來(lái)控制網(wǎng)格的行數(shù)。

該屬性接受一個(gè)或多個(gè)非負(fù)CSS 長(zhǎng)度值，其中每個(gè)值表示網(wǎng)格容器中每一行的高度，從第一行到最后一行。例如：

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

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

結(jié)果如下：

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

（3）grid-template-areas

可以使用grid-template-areas屬性來(lái)定義網(wǎng)格區(qū)域。該屬性有以下三個(gè)屬性值：

• grid-area-name：使用grid-area屬性設(shè)置的網(wǎng)格區(qū)域的名稱
• . ：空網(wǎng)格單元
• none：沒(méi)有定義網(wǎng)格區(qū)域

下面來(lái)看一個(gè)例子：

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

結(jié)果如下：

（4）網(wǎng)格線名稱

grid-template-columns 和 grid-template-rows 屬性還可以使用方括號(hào)來(lái)指定每一條網(wǎng)格線的名字，方便引用。

下面來(lái)看一個(gè)例子：

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

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

4. 行和列之間添加間隙

當(dāng)這樣設(shè)置完一個(gè)基礎(chǔ)的網(wǎng)格之后，有時(shí)想要在網(wǎng)格項(xiàng)之間有一些距離，就可以通過(guò)調(diào)整網(wǎng)格線的大小在列和行之間添加間距。這就需要用到 row-gap 和 column-gap 屬性。

（1）column-gap

可以使用 column-gap 屬性來(lái)通過(guò)調(diào)整網(wǎng)格容器中垂直網(wǎng)格線的寬度來(lái)增加列之間的間距。它接受一個(gè)非負(fù) CSS 長(zhǎng)度值，該值用來(lái)定義每列之間的網(wǎng)格線的寬度。例如：

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

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

結(jié)果如下：

（2）row-gap

可以使用 row-gap 屬性來(lái)通過(guò)調(diào)整網(wǎng)格容器中所有水平網(wǎng)格線的高度來(lái)在網(wǎng)格容器中的行之間添加間距。它接受一個(gè)非負(fù) CSS 長(zhǎng)度值，該值定義每行之間網(wǎng)格線的大小。

例如：

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

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

結(jié)果如下：

可以結(jié)合 column-gap 和 row-gap 屬性來(lái)分隔列和行：

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

結(jié)果如下：

5. 水平對(duì)齊內(nèi)容

Grid  布局提供了六個(gè)屬性來(lái)控制網(wǎng)格項(xiàng)沿網(wǎng)格容器的行或列的對(duì)齊方式。下面就來(lái)看看沿網(wǎng)格容器的列水平對(duì)齊網(wǎng)格項(xiàng)的屬性都是如何使用的。

（1）justify-items

可以使用 justify-items 屬性來(lái)控制所有網(wǎng)格項(xiàng)沿水平方向的對(duì)齊方式。它被傳遞給網(wǎng)格容器，其值適用于網(wǎng)格中的所有網(wǎng)格項(xiàng)。它接受四個(gè)可能的值：

• start：將網(wǎng)格項(xiàng)對(duì)齊到所有列的開(kāi)頭，即其單元格的左邊緣。

.container {
   justify-items: start;
}

• end：將網(wǎng)格項(xiàng)對(duì)齊到所有列的末尾，即其單元格的右邊緣。

.container {
   justify-items: end;
}

• center：將所有網(wǎng)格項(xiàng)目放在其單元格的中心。

.container {
   justify-items: center;
}

• stretch：將拉伸網(wǎng)格項(xiàng)目以填充其單元格的整個(gè)寬度（默認(rèn)值）。

.container {
   justify-items: stretch;
}

（2）justify-content

可以使用justify-content屬性來(lái)設(shè)置網(wǎng)格在網(wǎng)格容器內(nèi)沿著水平方向的對(duì)齊方式。它接受七個(gè)可能的值。

• start：將網(wǎng)格與網(wǎng)格容器的左邊對(duì)齊

.container {
   justify-content: start;
}

• end：將網(wǎng)格與網(wǎng)格容器的右邊對(duì)齊。

.container {
   justify-content: end;
}

• center：將整個(gè)網(wǎng)格水平放置在網(wǎng)格容器的中心。

.container {
   justify-content: center;
}

• stretch：調(diào)整網(wǎng)格項(xiàng)大小，讓寬度填充整個(gè)網(wǎng)格容器（默認(rèn)值）。

.container {
   justify-content: stretch;
}

• space-around：在網(wǎng)格項(xiàng)之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半。

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

• space-between：在網(wǎng)格項(xiàng)之間設(shè)置均等寬度空白間隙，其外邊緣無(wú)間隙。

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

• space-evenly：在每個(gè)網(wǎng)格項(xiàng)之間設(shè)置均等寬度的空白間隙，包括外邊緣。

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

（3）justify-self

可以使用 justify-self 屬性來(lái)設(shè)置單元格內(nèi)容的水平位置，此屬性定義在網(wǎng)格項(xiàng)上，它接受四個(gè)可能得值。

• start：將網(wǎng)格項(xiàng)對(duì)齊到列的開(kāi)頭，即其單元格的左邊緣。

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

• end：將網(wǎng)格項(xiàng)對(duì)齊到列的末尾，即其單元格的右邊緣。

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

• center：?jiǎn)螌⒕W(wǎng)格項(xiàng)放置在其單元格的中心。

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

• stretch：將拉伸網(wǎng)格項(xiàng)以填充整個(gè)單元格寬度（默認(rèn)值）

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

6. 垂直對(duì)齊內(nèi)容

（1）align-items

可以使用align-items 屬性來(lái)控制所有網(wǎng)格項(xiàng)沿垂直方向的對(duì)齊方式。它被傳遞給網(wǎng)格容器，其值適用于網(wǎng)格中的所有網(wǎng)格項(xiàng)。它接受四個(gè)可能的值：

• start：將所有網(wǎng)格項(xiàng)放在所有行的頂部

.container {
   align-items: start;
}

• end：將所有網(wǎng)格項(xiàng)放在所有行的底部。

.container {
   align-items: end;
}

• center：將所有網(wǎng)格項(xiàng)目放在其單元格的中心。

.container {
   align-items: center;
}

• stretch：將拉伸所有網(wǎng)格項(xiàng)目以填充其單元格的整個(gè)高度（默認(rèn)值）。

.container {
   align-items: stretch;
}

（2）align-content

可以使用align-content屬性來(lái)設(shè)置網(wǎng)格在網(wǎng)格容器內(nèi)沿著垂直方向的對(duì)齊方式。它接受七個(gè)可能的值。

• start：將整個(gè)網(wǎng)格對(duì)齊到網(wǎng)格容器的頂部

.container {
   align-content: start;
}

• end：將整個(gè)網(wǎng)格與網(wǎng)格容器的底部對(duì)齊。

.container {
   align-content: end;
}

• center：將整個(gè)網(wǎng)格垂直放置在網(wǎng)格容器的中心

.container {
   align-content: center;
}

• stretch：網(wǎng)格項(xiàng)目拉伸以填充容器網(wǎng)格的整個(gè)高度（默認(rèn)值）。

.container {
   align-content: stretch;
}

• space-around：在網(wǎng)格項(xiàng)之間設(shè)置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半。

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

• space-between：在網(wǎng)格項(xiàng)之間設(shè)置均等寬度空白間隙，其外邊緣無(wú)間隙。

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

• space-evenly：在每個(gè)網(wǎng)格項(xiàng)之間設(shè)置均等寬度的空白間隙，包括外邊緣。

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

（3）align-self

可以使用 align-self 屬性來(lái)設(shè)置單元格內(nèi)容的垂直位置，此屬性定義在網(wǎng)格項(xiàng)上，它接受四個(gè)可能得值。

• start：在其單元格的頂部放置一個(gè)網(wǎng)格項(xiàng)

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

• end：在其單元格的底部放置一個(gè)網(wǎng)格項(xiàng)。

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

• center：將一個(gè)網(wǎng)格項(xiàng)放置在其單元格的中心。

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

• stretch：將拉伸網(wǎng)格項(xiàng)目以填充其單元格的整個(gè)高度（默認(rèn)值）。

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

7. 新的測(cè)量單位

除了非負(fù)CSS 長(zhǎng)度值（例如px、rem、vw和百分比 ( %) ）之外，我們還可以使用特殊的大小單位和關(guān)鍵字來(lái)控制網(wǎng)格中網(wǎng)格項(xiàng)的大小。

（1）fr 單位

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

下面來(lái)看一個(gè)簡(jiǎn)單的例子，假設(shè)我們要?jiǎng)?chuàng)建一個(gè)由三列組成的網(wǎng)格布局，其中第一列占網(wǎng)格寬度的 1/6，第二列是第一列寬度的兩倍，第三列是第一列寬度的三倍。如果沒(méi)有fr 單位，我們就需要執(zhí)行一些數(shù)學(xué)運(yùn)算，先用網(wǎng)格的總寬度100%除以6，然后將結(jié)果乘以每列的跨度：

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

隨著布局變得越來(lái)越復(fù)雜，使用百分比或任何CSS 數(shù)學(xué)函數(shù)將變得不可持續(xù)。這時(shí) fr 單位就派上用場(chǎng)了。fr單位通過(guò)讓我們指定網(wǎng)格容器中的可用空間應(yīng)如何在其行和列之間進(jìn)行分配，然后按該順序分配可用空間：

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

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

結(jié)果如下：

（2）min-content

min-content 是一個(gè)用于調(diào)整大小的關(guān)鍵字，它將網(wǎng)格軌跡的寬度設(shè)置為最小寬度，通常是網(wǎng)格項(xiàng)中最小內(nèi)容或文本的大小。它的工作原理類似于CSS函數(shù)：min()，但被用作間距單位而不是函數(shù)。

當(dāng)應(yīng)用于列或行時(shí)，它們會(huì)變得與軌跡中最長(zhǎng)的內(nèi)容一樣窄。這可以獲得網(wǎng)格項(xiàng)內(nèi)內(nèi)容的最短長(zhǎng)度。

下面來(lái)看一個(gè)例子；

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

在上面的代碼中，我們將第一列和第三列的寬度設(shè)置為網(wǎng)格容器的小部分，同時(shí)將第二列設(shè)置為 min-content，使其縮小到網(wǎng)格項(xiàng)中內(nèi)容的大小。

結(jié)果如下：

（3）max-content

max-content關(guān)鍵字的效果與min-content相反，它類似于CSS函數(shù)：max()。當(dāng)應(yīng)用于列或行時(shí)，軌道將變得盡可能寬，以便網(wǎng)格項(xiàng)中的所有內(nèi)容都顯示在一條完整的長(zhǎng)行中。

使用max-content的好處就是，可以讓網(wǎng)格項(xiàng)中的內(nèi)容擴(kuò)展，而不是將它們包裝成新行，這會(huì)導(dǎo)致垂直文本溢出。

下面來(lái)看一個(gè)例子：

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

上面的代碼定義了三列，并將第二列的寬度設(shè)置為max-content關(guān)鍵字。如果在第二列的網(wǎng)格項(xiàng)中添加大量?jī)?nèi)容，這些網(wǎng)格項(xiàng)中的文本將不會(huì)溢出。相反，第二列的寬度將增加，第一列和第三列將縮小以適應(yīng)它。

結(jié)果如下：

8. CSS函數(shù)

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

（1）repeat()

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

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

該函數(shù)有兩個(gè)參數(shù)：① 第一個(gè)參數(shù)用來(lái)指定行或列的重復(fù)模式重復(fù)的次數(shù)，有三種取值方式：

• <number>：整數(shù)，確切的重復(fù)次數(shù)。
• <auto-fill>：以網(wǎng)格項(xiàng)為準(zhǔn)自動(dòng)填充。
• <auto-fit>：以網(wǎng)格容器為準(zhǔn)自動(dòng)填充。

第二個(gè)參數(shù)用來(lái)指定行或列的重復(fù)模式重復(fù)的內(nèi)容，有以下取值方式：

• <length>：非負(fù)長(zhǎng)度。
• <percentage>：相對(duì)于列軌道中網(wǎng)格容器的內(nèi)聯(lián)大小的非負(fù)百分比，以及行軌道中網(wǎng)格容器的塊長(zhǎng)寬。
• <flex>：?jiǎn)挝粸閒r的非負(fù)長(zhǎng)度，指定軌道彈性布局的系數(shù)值。
• max-content：表示網(wǎng)格的軌道長(zhǎng)度自適應(yīng)內(nèi)容最大的那個(gè)單元格。
• min-content：表示網(wǎng)格的軌道長(zhǎng)度自適應(yīng)內(nèi)容最小的那個(gè)單元格。
• auto：作為最大值時(shí)，等價(jià)于max-content。作為最小值時(shí)，它表示軌道中單元格最小長(zhǎng)寬(min-width/min-height)的最大值。

假設(shè)我們要?jiǎng)?chuàng)建一個(gè)具有六個(gè)相等列的網(wǎng)格。如果沒(méi)有 repeat() 函數(shù)，我們必須使用 grid-template-columns 屬性顯式定義每個(gè)列。代碼如下：

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

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

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

結(jié)果如下：

（2）minmax()

定義響應(yīng)式網(wǎng)格布局時(shí)，我們可能希望為每個(gè)網(wǎng)格軌道指定最小和最大寬度，以確保它們?cè)谝暱谡{(diào)整大小時(shí)上下縮放以適應(yīng)其內(nèi)容。這時(shí) minmax() 就派上用場(chǎng)了。

minmax() 函數(shù)允許我們指定網(wǎng)格軌道的最小和最大尺寸，它是一個(gè)長(zhǎng)寬范圍的閉區(qū)間。當(dāng)網(wǎng)格在視口中調(diào)整大小時(shí)，網(wǎng)格軌道將在該范圍內(nèi)增長(zhǎng)和縮小。在較小的屏幕上，它會(huì)縮小直到達(dá)到最小尺寸。在更大的屏幕上，它會(huì)拉伸直到達(dá)到最大尺寸。

minmax() 函數(shù)接受 CSS Grid 大小單位、關(guān)鍵字、長(zhǎng)度和百分比值。其有兩個(gè)參數(shù)：

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

下面來(lái)看一個(gè)例子：

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

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

結(jié)果如下：

minmax() 函數(shù)的一個(gè)顯著優(yōu)點(diǎn)就是它減少了對(duì)媒體查詢的需要。它不依靠媒體查詢來(lái)控制跨視口的網(wǎng)格軌道（列和行）的大小，而是允許在一定程度上設(shè)置網(wǎng)格軌道值的響應(yīng)式轉(zhuǎn)換。

（3）fit-content()

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

當(dāng)應(yīng)用于網(wǎng)格軌道時(shí)，它將網(wǎng)格軌道的大小設(shè)置為最小寬度，這是其網(wǎng)格項(xiàng)目中最小的內(nèi)容或文本的大小。需要注意的是，最小的內(nèi)容或文本大小不大于函數(shù)中指定的值。

但是，如果最小寬度的值超過(guò)了提供給函數(shù)的值，則網(wǎng)格軌道的大小將設(shè)置為傳遞給 fit-content() 函數(shù)的值，并且網(wǎng)格項(xiàng)的內(nèi)容將換行。

下面來(lái)看一個(gè)例子：

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

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

結(jié)果如下：

9. 網(wǎng)格項(xiàng)屬性

在網(wǎng)格容器中，每條網(wǎng)格線都根據(jù)其在網(wǎng)格上的位置給出一個(gè)編號(hào)。第一條網(wǎng)格線（行或列）的編號(hào)為 1，第二條為 2，依此類推。

例如，下圖在一個(gè)三列兩行的網(wǎng)格容器上存在的網(wǎng)格線的數(shù)量，其中列線是橙色圓圈內(nèi)從 1 到 4 的數(shù)字，而行線是藍(lán)色圓圈內(nèi)的數(shù)字從 1 到 3 圈。

瀏覽器使用這些網(wǎng)格線來(lái)控制網(wǎng)格中項(xiàng)目的布局和位置。CSS Grid 提供了一些屬性來(lái)控制網(wǎng)格項(xiàng)目沿這些網(wǎng)格線的位置，以及它們?cè)谒胶痛怪狈较蛏峡缭降膶挾取?/p>

可用于控制網(wǎng)格項(xiàng)的位置以及它們?nèi)绾慰缭竭@些行的屬性是：

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

（1）grid-column-start

可以使用 grid-column-start 屬性來(lái)指定網(wǎng)格項(xiàng)沿網(wǎng)格容器內(nèi)的列網(wǎng)格線的水平起始位置。這個(gè)開(kāi)始位置定義了網(wǎng)格項(xiàng)目左邊緣的開(kāi)始。

使用下面的網(wǎng)格布局，來(lái)定位第一個(gè)網(wǎng)格項(xiàng)并將其水平起始位置設(shè)置為第 2 列。

選擇第一個(gè)子元素，并定位：

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

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

上圖中，第一個(gè)網(wǎng)格項(xiàng)現(xiàn)在從第 2 列開(kāi)始，而其他網(wǎng)格項(xiàng)被移動(dòng)，換行到了新行或在網(wǎng)格上創(chuàng)建了空白空間。

（2）grid-column-end

除了使用 grid-column-start 指定網(wǎng)格項(xiàng)的水平起始位置外，還可以使用 grid-column-end 屬性設(shè)置網(wǎng)格項(xiàng)的結(jié)束位置。

例如：

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

這使得第一個(gè)網(wǎng)格項(xiàng)從第 2 列開(kāi)始，跨越兩條網(wǎng)格線，并在第 4 行結(jié)束。使用 grid-column-start 和 grid-column-end 屬性，可以有效地控制網(wǎng)格的水平起始位置以及它跨越網(wǎng)格的寬度。

結(jié)果如下：

（3）grid-row-start

可以使用 grid-row-start 屬性來(lái)指定網(wǎng)格項(xiàng)沿網(wǎng)格容器內(nèi)水平（行）網(wǎng)格線的垂直起始位置。它用于設(shè)置網(wǎng)格項(xiàng)開(kāi)始的行。

例如：

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

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

結(jié)果如下：

（4）grid-row-end

可以使用 grid-row-end 屬性來(lái)指定網(wǎng)格項(xiàng)沿網(wǎng)格容器內(nèi)水平（行）網(wǎng)格線的垂直結(jié)束位置。

例如：

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

這使得第二個(gè)網(wǎng)格項(xiàng)從第一行開(kāi)始，跨越三個(gè)網(wǎng)格線，在第 4 行結(jié)束。使用 grid-row-start 和 grid-row-end 屬性，可以有效地控制網(wǎng)格項(xiàng)的垂直起始位置及其在網(wǎng)格中的高度。

結(jié)果如下：

（5）其他

上面的四個(gè)屬性使用特定的網(wǎng)格線來(lái)確定網(wǎng)格項(xiàng)在網(wǎng)格內(nèi)的位置，它們的屬性值有以下幾種：

• <line>：可以是一個(gè)數(shù)字來(lái)指代相應(yīng)編號(hào)的網(wǎng)格線，也可使用名稱指代相應(yīng)命名的網(wǎng)格線。
• span <number>：網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道。
• span <name>：網(wǎng)格項(xiàng)將跨越一些軌道 ，直到遇到指定命名的網(wǎng)格線。
• auto：自動(dòng)布局，或者自動(dòng)跨越，或者跨越一個(gè)默認(rèn)的軌道。

下面來(lái)看一個(gè)例子：

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

這里使用 span 來(lái)表示第一個(gè)單元格跨越了2個(gè)網(wǎng)格。

結(jié)果如下：

下面來(lái)結(jié)合使用上面的四個(gè)屬性：

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

結(jié)果如下：

10. 隱式網(wǎng)格軌道

當(dāng)我們?cè)O(shè)置的網(wǎng)格不足以放下所有的網(wǎng)格項(xiàng)時(shí)，就會(huì)自動(dòng)出現(xiàn)一些網(wǎng)格軌道，這些多出來(lái)的行的高度是auto的，可以使用grid-auto-columns和 grid-auto-rows 屬性來(lái)指定自動(dòng)生成的網(wǎng)格軌道（又稱為隱式網(wǎng)格軌道）的大小。

例如：

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

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

11. 速記屬性

像大多數(shù) CSS 屬性一樣，CSS Grid 提供了一些速記屬性，它們提供了一種更短、更先進(jìn)的方式來(lái)同時(shí)設(shè)置多個(gè) CSS Grid 屬性的值。使用這些速記屬性，我們就可以編寫(xiě)更簡(jiǎn)潔 更易讀的樣式，從而節(jié)省開(kāi)發(fā)時(shí)間。下面就來(lái)看看這些屬性。

（1）gap

column-gap 和 row-gap 屬性用來(lái)設(shè)置網(wǎng)格之前的距離，即網(wǎng)格線的寬度?？梢酝ㄟ^(guò) gap 屬性簡(jiǎn)寫(xiě)這兩個(gè)屬性，其語(yǔ)法如下：

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

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

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

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

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

（2）place-items

place-items 用來(lái)設(shè)置 align-items 和 justify-items 屬性的值，它能夠同時(shí)控制所有網(wǎng)格項(xiàng)目的水平和垂直對(duì)齊。

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

例如：

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

這會(huì)將 align-items 和 justify-items 屬性的值都設(shè)置為 center，將所有網(wǎng)格項(xiàng)放置在其網(wǎng)格區(qū)域的中心。

（3）place-content

place-content 用來(lái)設(shè)置網(wǎng)格屬性 align-content 和 justify-content 的值，它能夠同時(shí)控制網(wǎng)格容器內(nèi)整個(gè)網(wǎng)格的水平和垂直對(duì)齊方式。

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

例如：

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

這樣就會(huì)將 align-content 和 justify-content 屬性的值都設(shè)置為 center，使整個(gè)網(wǎng)格在網(wǎng)格容器中水平和垂直居中。

（4）place-self

place-items 可以設(shè)置 align-self 和 justify-self 屬性的值。它能夠控制單個(gè)網(wǎng)格項(xiàng)目在其網(wǎng)格區(qū)域內(nèi)的水平和垂直對(duì)齊方式。

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

例如：

.item { 
   place-self: end center;
}

在上面的代碼中，align-self 屬性的值設(shè)置為end，這會(huì)將網(wǎng)格項(xiàng)垂直向下推到其網(wǎng)格單元格的底部。justify-self 屬性設(shè)置為 center，將網(wǎng)格項(xiàng)目水平放置在其單元格的中心。

結(jié)果如下：

（5）grid-column

grid-column 是 grid-column-start 和 grid-column-end 屬性的簡(jiǎn)寫(xiě)屬性。它可以指定網(wǎng)格項(xiàng)沿網(wǎng)格容器內(nèi)的列網(wǎng)格線的水平起始位置以及網(wǎng)格項(xiàng)應(yīng)該結(jié)束的位置。

grid-column的語(yǔ)法如下：

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

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

• 第一個(gè)值 column-start 是 grid-column-start 屬性的值。
• 第二個(gè)值 column-end 是 grid-column-end 屬性的值。
• 斜杠 (/) 用作這兩個(gè)值之間的分界線，因?yàn)閮烧叨伎梢园粋€(gè)或多個(gè)空格。因此，需要通過(guò)斜線來(lái)消除錯(cuò)誤和歧義。此外，作為最佳實(shí)踐，建議在斜杠 (/) 的兩側(cè)添加一哥空格，以使 CSS 更具可讀性。

例如：

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

上面的代碼告訴網(wǎng)格項(xiàng)從網(wǎng)格中的第 1 列水平跨越到第 3 列，與下面的代碼等價(jià)：

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

（6）grid-row

grid-row 屬性的工作方式與 grid-column 屬性一樣。它是 grid-row-start 和 grid-row-end 屬性的簡(jiǎn)寫(xiě)屬性。它可以指定網(wǎng)格項(xiàng)沿網(wǎng)格容器中的行網(wǎng)格線的垂直起始位置，以及網(wǎng)格項(xiàng)應(yīng)該在網(wǎng)格中的何處結(jié)束。

例如：

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

這就會(huì)使得網(wǎng)格項(xiàng)的高度從網(wǎng)格中的第 2 行向下跨越到第 5 行。

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

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

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

斜杠后面的部分可以省略，表示跨越第一個(gè)網(wǎng)格。

（7）grid-template

grid-template-columns、grid-template-rows、grid-template-areas這三個(gè)屬性可以簡(jiǎn)寫(xiě)在grid-template屬性中。

grid-template屬性有三個(gè)屬性值：

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

（8）grid-area

grid-area 屬性指定網(wǎng)格元素在網(wǎng)格布局中的大小和位置，它是grid-row-start、grid-column-start、grid-row-end、grid-column-end屬性的合并簡(jiǎn)寫(xiě)形式，其語(yǔ)法如下：

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

對(duì)于下面這段代碼：

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

可以簡(jiǎn)寫(xiě)成這樣：

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

除此之外，grid-area 屬性還可以對(duì)網(wǎng)格元素進(jìn)行命名。命名的網(wǎng)格元素可以通過(guò)容器的 grid-template-areas 屬性來(lái)引用。

下面來(lái)看一個(gè)例子：

.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';
}

結(jié)果如下：

（9）grid

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

grid 屬性的語(yǔ)法如下：

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

12. CSS Grid 調(diào)試

上面我們介紹了如何定義 CSS Grid 布局，那該如何調(diào)試呢？Chrome DevTools 支持對(duì) Grid 布局進(jìn)行提示。如果一個(gè)元素是 Grid 布局，在 DevTools 的 Elements 面板中，Grid 布局的容器元素上就會(huì)顯示一個(gè) grid 的標(biāo)識(shí)，如下：

點(diǎn)擊這個(gè) grid 標(biāo)志，頁(yè)面的 grid 網(wǎng)格就會(huì)顯示數(shù)網(wǎng)格區(qū)域以及網(wǎng)格線，并且會(huì)為網(wǎng)格線進(jìn)行編號(hào)，如下：

下面切換到 Layout 選項(xiàng)卡，就可以看到 Grid 布局的一些選項(xiàng)，我們可以設(shè)置頁(yè)面上是否顯示軌道的寬度/高度，是否展示網(wǎng)格區(qū)域的名稱，是否顯示網(wǎng)格線的延長(zhǎng)，是否顯示網(wǎng)格線的名稱。除此之外，還會(huì)顯示當(dāng)前頁(yè)面上所有使用 Grid 布局的地方，可以進(jìn)行顯示隱藏：

通過(guò)這些選項(xiàng)，就可以對(duì) CSS Grid 布局進(jìn)行調(diào)試了。

13. CSS Grid 生成器

最后來(lái)分享幾個(gè)實(shí)用的 CSS Grid 生成器。通過(guò)這些生成器，可以可視化得調(diào)整 Grid 布局，最終會(huì)拿到生成的 Grid 布局代碼。

（1）CSS Grid Generator

在線體驗(yàn)：https://cssgrid-generator.netlify.app/

（2）CSS Layout Generator

在線體驗(yàn)：https://layout.bradwoods.io/customize。

（3）Grid LayoutIt

在線體驗(yàn)：https://grid.layoutit.com/。

（4）Griddy

在線體驗(yàn)：https://griddy.io/。

（5）Cssgr.id

在線體驗(yàn)：https://cssgr.id/。