前言

大家還記得我們之前介紹過的CSS_Flex 那些鮮為人知的內幕,在文章中我們不是對API的羅列，而是從內部原理方向來解析Flex中我們常見的屬性和使用方式。該篇文章也得到大家的一致好評。

而今天，我們來講講我們平時可能會忽略，但是在一些應用場景中能讓我們得心應手的另外的布局方式 - Grid。

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

好了，天不早了，干點正事哇。

我們能所學到的知識點

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

1. Grid 是個啥

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

圖片

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

Grid vs Flex

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

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

Grid 布局遠比 Flex 布局強大。

Grid 相關術語

容器

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

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

在這個例子中，.container所對應的元素就是就是容器。

項目

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

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

在這個例子中，item 元素是項目，但 sub-item 不是。

網(wǎng)格線

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

圖片

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

網(wǎng)格單元

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

圖片

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

軌道

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

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

圖片

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

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

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

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

圖片

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

容器上的API

圖片

項目上的API

圖片

瀏覽器支持

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

圖片

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

在我們構建復雜頁面時，就會用到各種各樣的布局算法，每種算法用于不同類型的用戶界面。如下圖：

圖片

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

圖片

• 
• Flexbox 設計用于沿單個軸分配項目，這個我們在CSS_Flex 那些鮮為人知的內幕有過介紹
• Grid是我們今天的主角
• Position[4]用于設計一些脫離文檔流的元素

圖片

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

圖片

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

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

下面的頁面結構是我們常見的「圣杯布局」

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

圖片

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

而在其他任何布局模式中，創(chuàng)建這樣的區(qū)塊的唯一方法就是「添加更多的 DOM 節(jié)點」。例如，在表格布局中，每行都是用 <tr> 創(chuàng)建的，每個行中的單元格則使用 <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ū)塊對應即可。

3. 開啟 Grid 布局

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

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

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

?

默認情況下，Grid 使用「單列」，并根據(jù)子元素的數(shù)量動態(tài)創(chuàng)建行。這被稱為「隱式網(wǎng)格」，因為我們沒有明確定義任何結構。

?

圖片

圖片

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

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

它會動態(tài)增長和收縮。其實，網(wǎng)格容器仍然使用流式布局，而流式布局中的塊級元素會垂直增長以容納其內容。「只有子元素使用網(wǎng)格布局進行排列」。

容器高度固定

當我們將容器的高度固定后，在這種情況下，其內部項目的高度會「均分」容器高度。也就是當擁有多個項目時它們被分成大小相同的行。

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

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

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

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

這里多說一句，在CSS Values and Units Module Level 4[9]中定義了關于length的值

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

fr vs %

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

案例1

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

• 基于百分比的列的寬度大小會按照容器寬度*N%變化，當列寬度小于圖像寬度時，圖像從列中溢出。
• 基于fr單位的列無論如何縮小容器寬度，該列也不會收縮到其最小內容大小以下。

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

案例2

我們再來用一個例子來說明fr和%的區(qū)別。此時我們用gap來設置所有列和行之間添加了固定量的空間

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

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

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

隱式和顯式行

隱式行

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

從結果來看，gird將第三個元素放置到了第二行。

grid算法希望確保「每個子元素都有自己的網(wǎng)格單元」。它會根據(jù)需要「生成新的行來實現(xiàn)這個目標」。

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

顯式行

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

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

repeat

假設我們正在構建一個日歷：

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

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

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

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

repeat函數(shù)會為我們進行復制和粘貼。

5. 分配子項

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

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

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

如果我們希望子項占據(jù)單個行或列，我們可以通過其編號來指定。grid-column: 3將使子項位于第三列。

網(wǎng)格子項還可以跨越多個行/列。其語法「使用斜杠來劃分起始和結束位置」：

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

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

這本質上是這樣的簡寫形式：

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

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

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

負數(shù)行號

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

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

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

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

areas

假設我們正在構建這個布局：

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

.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)格結構。除此之外，我們還使用grid-template-areas定義了一個區(qū)域的劃分

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

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

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

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

當我們想讓特定區(qū)域跨越多行或多列時，我們可以在我們的模板中「重復該區(qū)域的名稱」。在這個例子中，sidebar區(qū)域跨越了兩行，所以我們在第一列的兩個單元格中都寫了 sidebar。

如何抉擇

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

鍵盤用戶的注意事項

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

通過一個示例會更容易理解。在這個示例中，我設置了一組按鈕，并使用 Grid 對它們進行了排列：

如果我們使用的是帶有鍵盤的設備，可以通過點擊左上角的第一個按鈕（One），然后按 Tab 鍵逐個移動按鈕。

你應該會看到類似于這樣的情況：

焦點輪廓在頁面上毫無規(guī)律地跳動,這是因為按鈕的焦點是「基于它們在 DOM 中出現(xiàn)的順序而定」的。

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

6. 對齊方式

justify-content

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

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

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

如果想利用多余空間進行對項目的排布處理，此時我們可以使用 justify-content 屬性來控制列的分布，并且我們接受上面所列舉的各種值。

.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,布局排布的原理是一樣的，只不過Grid和Flex最大的區(qū)別在于，我們正在「對齊列，而不是項本身」。本質上，justify-content[15] 讓我們更好的操作網(wǎng)格的列，以便可以根據(jù)我們的意愿將它們分布在整個網(wǎng)格中。

justify-items

如果我們想在列內對齊項目本身，我們可以使用 justify-items 屬性：

• start：將項目與其單元格的開始邊緣對齊
• end：將項目與其單元格的結束邊緣對齊
• center：將項目置于其單元格的中心
• stretch：填充單元格的整個寬度（這是默認值）

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

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

.container {
  justify-items: stretch;
}

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

justify-self

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

其值為以下幾個：

• start：將網(wǎng)格項與其單元格的開始邊緣對齊
• end：將網(wǎng)格項與其單元格的結束邊緣對齊
• center：將網(wǎng)格項置于其單元格的中心
• stretch：填充單元格的整個寬度（這是默認值）

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

垂直方向的對齊處理

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

align-items

其取值為以下幾種：

• stretch：填充單元格的整個高度（這是默認值）
• start：將項目與其單元格的開始邊緣對齊
• end：將項目與其單元格的結束邊緣對齊
• center：將項目置于其單元格的中心
• baseline：沿著文本基線對齊項目。

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

示例

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

總結

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

為了進一步梳理：

• justify — 處理列
• align — 處理行
• content — 處理網(wǎng)格結構
• items — 處理網(wǎng)格結構內的 DOM 節(jié)點。

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

place-content

place-content 屬性是一個縮寫。它是這樣的語法糖：

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

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

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

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

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