前言

大家還記得我們之前介紹過(guò)的CSS_Flex 那些鮮為人知的內(nèi)幕,在文章中我們不是對(duì)API的羅列，而是從內(nèi)部原理方向來(lái)解析Flex中我們常見(jiàn)的屬性和使用方式。該篇文章也得到大家的一致好評(píng)。

而今天，我們來(lái)講講我們平時(shí)可能會(huì)忽略，但是在一些應(yīng)用場(chǎng)景中能讓我們得心應(yīng)手的另外的布局方式 - Grid。

還是和上一篇Flex文章一樣，我們不是對(duì)Grid的API進(jìn)行羅列，而是從更深層次的角度來(lái)了解Grid。也就是意味著，本篇文章需要一定的Grid的基礎(chǔ)知識(shí)。如果大家還不了解，可以翻看阮一峰老師寫的CSS Grid 網(wǎng)格布局教程[1]

好了，天不早了，干點(diǎn)正事哇。

我們能所學(xué)到的知識(shí)點(diǎn)

1. Gird 是個(gè)啥
2. Grid 是重要的布局算法之一
3. 開(kāi)啟 Grid 布局
4. 創(chuàng)建網(wǎng)格單元
5. 分配子項(xiàng)
6. 對(duì)齊方式

1. Grid 是個(gè)啥

網(wǎng)格布局（Grid）將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。

圖片

上圖這樣的布局，就是 Grid 布局的拿手好戲。

Grid vs Flex

Grid 布局與 Flex 布局有一定的相似性，都可以指定「容器」內(nèi)部多個(gè)「項(xiàng)目」的位置。但是，它們也存在重大區(qū)別。

• Flex 布局是「軸線布局」，只能指定項(xiàng)目針對(duì)軸線的位置，可以看作是「一維布局」。
• Grid 布局則是將容器劃分成行和列，產(chǎn)生單元格，然后指定項(xiàng)目所在的單元格，可以看作是「二維布局」。

Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。

Grid 相關(guān)術(shù)語(yǔ)

容器

容器是應(yīng)用了 display: grid 樣式的元素。它是所有網(wǎng)格項(xiàng)的「直接父元素」。

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

在這個(gè)例子中，.container所對(duì)應(yīng)的元素就是就是容器。

項(xiàng)目

項(xiàng)目是網(wǎng)格容器的子元素（即「直接后代」）。

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

在這個(gè)例子中，item 元素是項(xiàng)目，但 sub-item 不是。

網(wǎng)格線

網(wǎng)格線是構(gòu)成網(wǎng)格結(jié)構(gòu)的分割線。它們可以是垂直的（列網(wǎng)格線）或水平的（行網(wǎng)格線），并位于行或列的兩側(cè)。

圖片

在這里，黃色線是列網(wǎng)格線的一個(gè)例子。

網(wǎng)格單元

網(wǎng)格單元是兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間。它是網(wǎng)格的單個(gè)「單位」。

圖片

在這個(gè)例子中，這是位于行網(wǎng)格線 1 和 2 之間，以及列網(wǎng)格線 2 和 3 之間的網(wǎng)格單元。

軌道

軌道是兩個(gè)相鄰網(wǎng)格線之間的空間。

我們可以將它們看作是網(wǎng)格的列或行。

圖片

在這個(gè)例子中，這是第二行網(wǎng)格線和第三行網(wǎng)格線之間的軌道。

網(wǎng)格區(qū)域

網(wǎng)格區(qū)域是由四條網(wǎng)格線圍成的總空間。

一個(gè)網(wǎng)格區(qū)域可能由「任意數(shù)量的網(wǎng)格單元組成」。

圖片

在這個(gè)例子中，這是位于行網(wǎng)格線 1 和 3 之間，以及列網(wǎng)格線 1 和 3 之間的網(wǎng)格區(qū)域。

容器上的API

圖片

項(xiàng)目上的API

圖片

瀏覽器支持

根據(jù) caniuse[2]，Grid 支持 97.78% 的用戶。

圖片

2. Grid 是重要的布局算法之一

在我們構(gòu)建復(fù)雜頁(yè)面時(shí)，就會(huì)用到各種各樣的布局算法，每種算法用于不同類型的用戶界面。如下圖：

圖片

• Flow布局[3]是瀏覽器「默認(rèn)的布局算法」，設(shè)計(jì)用于數(shù)字文檔。

圖片

• 
• Flexbox 設(shè)計(jì)用于沿單個(gè)軸分配項(xiàng)目，這個(gè)我們?cè)贑SS_Flex 那些鮮為人知的內(nèi)幕有過(guò)介紹
• Grid是我們今天的主角
• Position[4]用于設(shè)計(jì)一些脫離文檔流的元素

圖片

• Table布局[5]設(shè)計(jì)用于表格數(shù)據(jù)
• Float[6]用于設(shè)計(jì)一些文本環(huán)繞的布局

圖片

相比，我們比較熟悉的布局算法(flaot/position/table等)Grid 是最新最強(qiáng)大的布局算法。grid是2017年才發(fā)布的。

Grid最令人神往的地方就是它的網(wǎng)格結(jié)構(gòu)，即行和列，具體表現(xiàn)就是這些頁(yè)面布局只需在 CSS 中定義即可。

下面的頁(yè)面結(jié)構(gòu)是我們常見(jiàn)的「圣杯布局」

<header></header>
<nav></nav>
<main></main>
<footer></footer>

圖片

使用 Grid來(lái)實(shí)現(xiàn)該布局，我們只需要在CSS中劃分好具體哪個(gè)元素所占的區(qū)域即可。(這里我們就不貼代碼了)

而在其他任何布局模式中，創(chuàng)建這樣的區(qū)塊的唯一方法就是「添加更多的 DOM 節(jié)點(diǎn)」。例如，在表格布局中，每行都是用 <tr> 創(chuàng)建的，每個(gè)行中的單元格則使用 <td> 或 <th>：

<table>
  <tbody>
    <!-- 第一行 -->
    <tr>
      <!-- 第一行中的單元格 -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <!-- 第二行 -->
    <tr>
      <!-- 第二行中的單元格 -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

與其他布局不同，Grid 允許我們完全在 CSS 中管理布局。我們可以將容器切成任意形狀，然后將子元素和這些區(qū)塊對(duì)應(yīng)即可。

3. 開(kāi)啟 Grid 布局

我們通過(guò) display 屬性選擇啟用網(wǎng)格布局模式：

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

• grid – 生成塊級(jí)網(wǎng)格
• inline-grid – 生成內(nèi)聯(lián)級(jí)網(wǎng)格

?

默認(rèn)情況下，Grid 使用「單列」，并根據(jù)子元素的數(shù)量動(dòng)態(tài)創(chuàng)建行。這被稱為「隱式網(wǎng)格」，因?yàn)槲覀儧](méi)有明確定義任何結(jié)構(gòu)。

?

圖片

圖片

隱式網(wǎng)格是動(dòng)態(tài)的；根據(jù)子元素的數(shù)量將添加和刪除行。每個(gè)子元素都有自己的行。

默認(rèn)情況下，網(wǎng)格容器的高度由其子元素確定。

它會(huì)動(dòng)態(tài)增長(zhǎng)和收縮。其實(shí)，網(wǎng)格容器仍然使用流式布局，而流式布局中的塊級(jí)元素會(huì)垂直增長(zhǎng)以容納其內(nèi)容?！钢挥凶釉厥褂镁W(wǎng)格布局進(jìn)行排列」。

容器高度固定

當(dāng)我們將容器的高度固定后，在這種情況下，其內(nèi)部項(xiàng)目的高度會(huì)「均分」容器高度。也就是當(dāng)擁有多個(gè)項(xiàng)目時(shí)它們被分成大小相同的行。

4. 創(chuàng)建網(wǎng)格單元

默認(rèn)情況下，Grid將創(chuàng)建單列布局。我們可以使用grid-template-columns[7]屬性指定列：

通過(guò)將兩個(gè)值傳遞給grid-template-columns —— 25%和75% —— 告訴Grid算法將元素分成兩列。

列可以使用任何有效的CSS <length-percentage>值定義，包括像素、rems、視口單位等。此外，我們還可以使用新的單位，即fr單位[8]：

這里多說(shuō)一句，在CSS Values and Units Module Level 4[9]中定義了關(guān)于length的值

這里的fr代表分?jǐn)?shù)(fraction)。在這個(gè)示例中，我們說(shuō)第一列應(yīng)該占用1個(gè)單位的空間，而第二列占用3個(gè)單位的空間。這意味著總共有4個(gè)單位的空間，這成為分母。第一列占據(jù)了可用空間的1/4，而第二列占據(jù)了3/4。

fr vs %

fr單位為Grid帶來(lái)了類似Flexbox樣式的靈活性。百分比和 <length> 值會(huì)創(chuàng)建硬約束，而fr列可以「根據(jù)需要自由地增長(zhǎng)和收縮，以容納其內(nèi)容」。

案例1

仔細(xì)觀看下面的例子，Grid的項(xiàng)目一個(gè)用了fr一個(gè)用了%。此時(shí)我們?yōu)榈谝涣械念^像賦予了一個(gè)指定寬度的圖像。隨著容器寬度發(fā)生變化，當(dāng)容器寬度小到一定程度，即第一列的寬度小于圖像的設(shè)定寬度時(shí)，就會(huì)發(fā)生如下的變化。

• 基于百分比的列的寬度大小會(huì)按照容器寬度*N%變化，當(dāng)列寬度小于圖像寬度時(shí)，圖像從列中溢出。
• 基于fr單位的列無(wú)論如何縮小容器寬度，該列也不會(huì)收縮到其最小內(nèi)容大小以下。

更準(zhǔn)確地說(shuō)：fr單位分配額外的空間。首先，列寬將根據(jù)其內(nèi)容計(jì)算。如果有剩余空間，它將根據(jù)fr值進(jìn)行分配。該特性和flex-grow是一致的。

案例2

我們?cè)賮?lái)用一個(gè)例子來(lái)說(shuō)明fr和%的區(qū)別。此時(shí)我們用gap來(lái)設(shè)置所有列和行之間添加了固定量的空間

看看在%和fr之間切換時(shí)會(huì)發(fā)生什么：

當(dāng)使用基于%的列時(shí)，內(nèi)容會(huì)溢出到網(wǎng)格父容器之外。這是因?yàn)?是使用總網(wǎng)格區(qū)域來(lái)計(jì)算的。這兩列消耗了父容器的內(nèi)容區(qū)域的25%+75%=100%，并且它們不允許收縮。當(dāng)我們添加了16px的gap時(shí)，列別無(wú)選擇，只能溢出容器。

相比之下，fr是「基于額外的空間計(jì)算」的。在這種情況下，額外的空間已經(jīng)減少了16px，以用于設(shè)置gap。

隱式和顯式行

隱式行

如果我們向一個(gè)兩列網(wǎng)格添加「超過(guò)兩個(gè)子元素」會(huì)發(fā)生什么呢？

從結(jié)果來(lái)看，gird將第三個(gè)元素放置到了第二行。

grid算法希望確?！该總€(gè)子元素都有自己的網(wǎng)格單元」。它會(huì)根據(jù)需要「生成新的行來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)」。

這在我們有可變數(shù)量的項(xiàng)目并且我們希望容器自動(dòng)排布項(xiàng)目的情況下非常方便。

顯式行

不過(guò)，在其他情況下，我們希望「顯式定義行，以創(chuàng)建特定的布局」。我們可以使用grid-template-rows[10]屬性來(lái)實(shí)現(xiàn)：

通過(guò)同時(shí)定義grid-template-rows和grid-template-columns，我們創(chuàng)建了一個(gè)顯式網(wǎng)格。我們就可以用幾行代碼，實(shí)現(xiàn)了所謂的「圣杯布局」。

repeat

假設(shè)我們正在構(gòu)建一個(gè)日歷：

Grid是處理這種情況的絕佳工具。我們可以將其構(gòu)建為一個(gè)7列的網(wǎng)格，每列占據(jù)1個(gè)單位的空間：

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

上面方式肯定是有效可行的，但是我們不想重復(fù)寫1fr多次。此時(shí)我們就可以使用repeat()來(lái)解決。

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

repeat函數(shù)會(huì)為我們進(jìn)行復(fù)制和粘貼。

5. 分配子項(xiàng)

默認(rèn)情況下，Grid算法會(huì)將每個(gè)子項(xiàng)分配給「第一個(gè)未占用的網(wǎng)格單元」

但是呢，Grid還賦予我們一種能力-我們可以將我們的項(xiàng)目分配到任何我們想要放置的單元格！子項(xiàng)甚至可以跨越多行/列。

grid-row[11]和grid-column[12]屬性允許我們指定網(wǎng)格子項(xiàng)應(yīng)該占據(jù)哪些軌道。

如果我們希望子項(xiàng)占據(jù)單個(gè)行或列，我們可以通過(guò)其編號(hào)來(lái)指定。grid-column: 3將使子項(xiàng)位于第三列。

網(wǎng)格子項(xiàng)還可以跨越多個(gè)行/列。其語(yǔ)法「使用斜杠來(lái)劃分起始和結(jié)束位置」：

.child {
  grid-column: 1 / 4;
}

上面的1 / 4可不是一個(gè)分?jǐn)?shù)，在CSS中，「斜杠字符不用于除法，而是用于分隔值組」。在這種情況下，它允許我們?cè)谝粋€(gè)聲明中設(shè)置起始和結(jié)束列。

這本質(zhì)上是這樣的簡(jiǎn)寫形式：

.child {
  grid-column-start: 1;
  grid-column-end: 4;
}

我們提供的數(shù)字是「基于列線」，而不是列索引。

一個(gè)有4列的網(wǎng)格實(shí)際上有5條列線。當(dāng)我們將子項(xiàng)分配到網(wǎng)格時(shí)，我們使用這些線來(lái)錨定它們。如果我們希望子項(xiàng)跨越前3列，它需要從第1行開(kāi)始，并在第4行結(jié)束。

負(fù)數(shù)行號(hào)

在從左到右的語(yǔ)言中，比如英語(yǔ)，我們從左到右計(jì)算列。然而，使用負(fù)數(shù)行號(hào)，我們也可以反向計(jì)算，從右到左。

.child {
  /* 位于從右數(shù)的第2列： */
  grid-column: -2;
}

我們還可以混合使用正數(shù)和負(fù)數(shù)。

對(duì)比上面兩個(gè)例子，盡管我們根本沒(méi)有改變grid-column的配置(grid-column:1 /-1)，雖然列數(shù)增加了，但是每個(gè)例子中的子項(xiàng)都跨越了網(wǎng)格的整個(gè)寬度！

areas

假設(shè)我們正在構(gòu)建這個(gè)布局：

根據(jù)我們目前學(xué)到的知識(shí)，我們可以這樣操作：

.grid {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
}
.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}
header {
  grid-column: 2;
  grid-row: 1;
}
main {
  grid-column: 2;
  grid-row: 2;
}

上面例子是可行的，但是Grid還為我們提供了更好的解決方案 - grid-areas[13]

像之前一樣，我們使用 grid-template-columns 和 grid-template-rows 定義了網(wǎng)格結(jié)構(gòu)。除此之外，我們還使用grid-template-areas定義了一個(gè)區(qū)域的劃分

.parent {
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

使用grid-template-areas我們勾勒出了我們想要?jiǎng)?chuàng)建的網(wǎng)格。

每一行代表一行，每個(gè)單詞是我們給網(wǎng)格的特定部分命名。

然后，我們不是用 grid-column 和 grid-row 分配子項(xiàng)，而是用 grid-area[14]！

當(dāng)我們想讓特定區(qū)域跨越多行或多列時(shí)，我們可以在我們的模板中「重復(fù)該區(qū)域的名稱」。在這個(gè)例子中，sidebar區(qū)域跨越了兩行，所以我們?cè)诘谝涣械膬蓚€(gè)單元格中都寫了 sidebar。

如何抉擇

在構(gòu)建顯示布局時(shí)，我們可以通過(guò)使用areas和行/列都可以達(dá)到目的，但是呢，使用areas時(shí)，它允許我們給grid分配語(yǔ)義含義，而不是使用晦澀難懂的行/列數(shù)字。也就是說(shuō)，當(dāng)網(wǎng)格具有固定數(shù)量的行和列時(shí)，areas效果最佳。grid-column 和 grid-row 可以在隱式網(wǎng)格中很有用。

鍵盤用戶的注意事項(xiàng)

在處理網(wǎng)格分配時(shí)存在一個(gè)重要的問(wèn)題：Tab 鍵順序仍然基于 DOM 位置，而不是網(wǎng)格位置。

通過(guò)一個(gè)示例會(huì)更容易理解。在這個(gè)示例中，我設(shè)置了一組按鈕，并使用 Grid 對(duì)它們進(jìn)行了排列：

如果我們使用的是帶有鍵盤的設(shè)備，可以通過(guò)點(diǎn)擊左上角的第一個(gè)按鈕（One），然后按 Tab 鍵逐個(gè)移動(dòng)按鈕。

你應(yīng)該會(huì)看到類似于這樣的情況：

焦點(diǎn)輪廓在頁(yè)面上毫無(wú)規(guī)律地跳動(dòng),這是因?yàn)榘粹o的焦點(diǎn)是「基于它們?cè)?DOM 中出現(xiàn)的順序而定」的。

為了解決這個(gè)問(wèn)題，我們應(yīng)該重新按視覺(jué)順序在 DOM 中重新排列網(wǎng)格子項(xiàng)，以便我可以從左到右，從上到下進(jìn)行 Tab 鍵瀏覽。

6. 對(duì)齊方式

justify-content

到目前為止我們看到的所有示例中，我們的列和行都會(huì)伸展以填滿整個(gè)網(wǎng)格容器。然而，我們是通過(guò)配置讓內(nèi)容進(jìn)行別樣的排布。

• start：將網(wǎng)格與容器的開(kāi)始邊緣對(duì)齊
• end：將網(wǎng)格與容器的結(jié)束邊緣對(duì)齊
• center：將網(wǎng)格置于容器的中心
• stretch：重新調(diào)整網(wǎng)格項(xiàng)的大小，以使網(wǎng)格填充容器的整個(gè)寬度
• space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置相等量的空間，兩端的空間為一半大小
• space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置相等量的空間，兩端沒(méi)有空間
• space-evenly：在每個(gè)網(wǎng)格項(xiàng)之間放置相等量的空間，包括兩端

例如，假設(shè)我們定義了兩個(gè)都是 90px 寬的列。只要網(wǎng)格容器大于 180px，就會(huì)有一些多余的空間：

如果想利用多余空間進(jìn)行對(duì)項(xiàng)目的排布處理，此時(shí)我們可以使用 justify-content 屬性來(lái)控制列的分布，并且我們接受上面所列舉的各種值。

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

justify-content:startjustify-content:centerjustify-content:endjustify-content:space-betweenjustify-content:space-aroundjustify-content:space-evenly

看到space-between/space-around是否想到Flex,布局排布的原理是一樣的，只不過(guò)Grid和Flex最大的區(qū)別在于，我們正在「對(duì)齊列，而不是項(xiàng)本身」。本質(zhì)上，justify-content[15] 讓我們更好的操作網(wǎng)格的列，以便可以根據(jù)我們的意愿將它們分布在整個(gè)網(wǎng)格中。

justify-items

如果我們想在列內(nèi)對(duì)齊項(xiàng)目本身，我們可以使用 justify-items 屬性：

• start：將項(xiàng)目與其單元格的開(kāi)始邊緣對(duì)齊
• end：將項(xiàng)目與其單元格的結(jié)束邊緣對(duì)齊
• center：將項(xiàng)目置于其單元格的中心
• stretch：填充單元格的整個(gè)寬度（這是默認(rèn)值）

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

當(dāng)我們將一個(gè) DOM 節(jié)點(diǎn)放入網(wǎng)格父元素時(shí)，默認(rèn)行為是它會(huì)跨越整個(gè)列，就像流式布局中的 <div> 會(huì)橫向拉伸以填滿其容器一樣。但是，使用 justify-items，我們可以調(diào)整這種行為。

.container {
  justify-items: stretch;
}

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

justify-self

我們可以使用justify-self來(lái)控制「特定網(wǎng)格子元素」的對(duì)齊方式

其值為以下幾個(gè)：

• start：將網(wǎng)格項(xiàng)與其單元格的開(kāi)始邊緣對(duì)齊
• end：將網(wǎng)格項(xiàng)與其單元格的結(jié)束邊緣對(duì)齊
• center：將網(wǎng)格項(xiàng)置于其單元格的中心
• stretch：填充單元格的整個(gè)寬度（這是默認(rèn)值）

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

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

垂直方向的對(duì)齊處理

到目前為止，我們一直在討論如何在水平方向上對(duì)齊內(nèi)容。Grid 還提供了一組額外的屬性來(lái)在垂直方向上對(duì)齊內(nèi)容：

align-items

其取值為以下幾種：

• stretch：填充單元格的整個(gè)高度（這是默認(rèn)值）
• start：將項(xiàng)目與其單元格的開(kāi)始邊緣對(duì)齊
• end：將項(xiàng)目與其單元格的結(jié)束邊緣對(duì)齊
• center：將項(xiàng)目置于其單元格的中心
• baseline：沿著文本基線對(duì)齊項(xiàng)目。

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

示例

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

總結(jié)

align-content 類似于 justify-content，但它影響的是行而不是列。同樣，align-items 類似于 justify-items，但它處理的是網(wǎng)格區(qū)域內(nèi)項(xiàng)目的垂直對(duì)齊，而不是水平對(duì)齊。

為了進(jìn)一步梳理：

• justify — 處理列
• align — 處理行
• content — 處理網(wǎng)格結(jié)構(gòu)
• items — 處理網(wǎng)格結(jié)構(gòu)內(nèi)的 DOM 節(jié)點(diǎn)。

最后，除了 justify-self，我們還有 align-self。這個(gè)屬性控制單個(gè)網(wǎng)格項(xiàng)在其單元格內(nèi)的垂直位置。

place-content

place-content 屬性是一個(gè)縮寫。它是這樣的語(yǔ)法糖：

.parent {
  justify-content: center;
  align-content: center;
}

使用該屬性，我們可以用最少的代碼實(shí)現(xiàn)我們平時(shí)很難實(shí)現(xiàn)的布局。

只使用兩個(gè) CSS 屬性，我們就可以將子元素水平和垂直居中于容器中：

正如我們所學(xué)到的，justify-content 控制列的位置。align-content 控制行的位置。在這種情況下，我們有一個(gè)隱式網(wǎng)格只有一個(gè)子元素，因此我們得到一個(gè) 1×1 網(wǎng)格。place-content: center 將行和列都推向中心。

將元素放置在左上角將元素放置在右下角