[譯] CSS 網格佈局入門：Part 1

原文連接：INTRODUCTION TO CSS GRID LAYOUT，from FIREFOX DEVTOOLS PLAYGROUND

本系列會分兩篇發佈，這是本系列的第一篇：

• CSS 網格佈局入門：Part 1
• CSS 網格佈局入門：Part 2

在開始介紹網格佈局（Grid Layout）以前，先來熟悉一下幾個關鍵術語的定義。

術語

網格線 Grid lines

在網格中，用來分隔行和列的線條，分水平和垂直兩個方向。

網格單元 Grid cell

CSS 網格里的一個單元。

網格區域 Grid area

由 4 根網格線圍成的矩形區域。一個網格區域能夠包含任意多個網格單元。

網格軌道 Grid track

指 2 根網格線之間的空間。網格軌道分水平和垂直兩個方向。

網格行 Grid row

水平方向的網格軌道稱「網格行」。

網格列 Grid column

垂直方向的網格軌道稱「網格列」。

欄距 Gutter

網格中，行與列之間的間隙稱爲「欄距」。

網格容器 Grid container

它是保存整個 CSS 網格的容器。使用 display: grid 或 display: inline-grid 聲明的元素就是網格容器。

網格項目 Grid item

對網格容器直接子元素的稱呼。

你好，網格

建立網格

開始網格佈局前，先要聲明一個網格容器。

.container {
  display: grid;
}
複製代碼

咱們將 .container 指定爲網格容器。

定義行和列

有好幾種定義列和行的方式。這是我們的第一個網格，先用 grid-template-columns 和 grid-template-rows 來定義。grid-template-columns 是定義列（包括列數和列寬）的，grid-template-rows 用來定義行（包括行數和行高）的。下面咱們建立一個行高和列寬都是 150px 的 3 × 3 網格。

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
複製代碼

若是再加一列，70px 寬的。就這樣寫：

grid-template-columns: 150px 150px 150px 70px;
複製代碼

列的添加是否是很方便呢？

定義欄距

在 CSS 網格佈局中，定義欄距也是超級簡單的。只要像下面這樣：

grid-gap: 1rem;
複製代碼

這句聲明表示行與列之間的間隙都是 1rem。若是要單獨指定列與列之間的間隙或行與行之間的間隙，那就使用 grid-column-gap 或 grid-column-gap 屬性了。

如今把上面講過的放一塊兒：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>
複製代碼

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}
複製代碼

效果以下：

View on Codepen

上面就是一個簡單的網格佈局了。

世界上最好的網格佈局工具

很神奇，對吧？如今調出瀏覽器開發者工具，嘗試改變列寬或行高，或者不使用 grid-gap 屬性，代之以 grid-column-gap 和 grid-row-gap 屬性，得到會更加細粒度的欄距控制。

在使用 CSS 網格佈局時，擁有一套良好的開發工具是相當重要的。Firefox 有一些很是棒的特性，專門用來幫助你來建立和設計網格。感興趣嘛？下載 Firefox 開發者版本，使用世界上最好的 CSS 網格佈局工具吧。

下一節，咱們來學習使用 Firefox 的 CSS 網格佈局面板。

Firefox 開發者工具

網格的疊加層

Firefox 的 CSS 網格佈局面板會列出頁面上全部的 CSS 網格容器。當你勾選某一個網格時，會添加一個疊加層（overlay），幫助可視化網格。你們能夠自定義疊加層上的顯示信息，包括網格的線號（line number）和尺寸。

與網格互動

咱們還能跟網格互動。佈局面板的邊欄中會描繪出網格輪廓。將鼠標懸停在輪廓上，會突出顯示頁面上的某塊網格區域，並會顯示尺寸和位置信息。

顯示網格區域

勾選「Display grid areas」設置，會顯示每一個單元格中的邊界區域以及區域名稱。以後，咱們將學習如何爲網格區域設置名稱。

可視化轉換

當咱們對網格容器作 CSS transform 處理的時候，網格檢查器將會實時可視化當前的網格佈局狀態。這樣就能幫助你們準確查看發平生移、傾斜、旋轉或縮放時，各個網格線所處的位置。

建議你在繼續操做以前下載並安裝  Firefox 瀏覽器。這些功能僅在 Firefox 中可用，而且在你瞭解 CSS 網格佈局的前因後果時將提供很多幫助。

下載 Firefox 開發者版本

fr 單位

在咱們寫的第一個網格例子裏，列使用的是固定單位 px。挺好的，但不是很靈活。幸運的是，CSS 網格佈局引入了一個新的長度單位 fr，是單詞「fraction」的縮寫。MDN 將 fr 單元定義爲網格容器中可用空間的幾分之幾。若是咱們想重寫以前網格的三等寬列，用 fr 改寫就是下面這樣的：

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}
複製代碼

repeat() 符號

上面在使用 fr 的時候，寫了三遍：1fr 1fr 1fr，並且 grid-template-rows: 150px 150px; 裏也有兩個 150px。遇到這種狀況，咱們能夠用 repeat() 符號改寫：

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-gap: 1rem;
}
複製代碼

repeat(3, 1fr) 表示 3 個 1fr，效果等同於 1fr 1fr 1fr；repeat(2, 150px) 表示 2 個 150px，效果等同於 150px 150px。

效果以下：

將上面代碼裏的 grid-template-columns 屬性值改爲下面這個樣子，觀察：

grid-template-columns: 10px repeat(2, 1fr);
複製代碼

看見也是有效的！說明，咱們不只能夠使用 repeat() 符號簡寫重複的網格軌道列表，還能夠混合使用單元（也就是本例中的 px 和 fr）。

下面一節，咱們會學習更加關於混合單位的信息。

混合單位

聲明軌道尺寸時，除了能夠使用固定尺寸單位（像 px、em 等），還能夠例如百分比或 fr 這樣的彈性單位。可是，CSS 網格佈局真正的魔力是可以混合使用這些單位。舉一個例子：

.container {
  width: 800px;
  display: grid;
  grid-template-columns: 100px 30% 1fr;
  grid-template-rows: 200px 100px;
  grid-gap: 1rem;
}
複製代碼

這裏咱們聲明瞭一個包含 3 列的網格。第一列是固定寬度 100px；第二列佔據了可用空間（譯註：本例中，即 .container 的寬度 800px）的 30%；第三列的 1fr 表示佔據剩餘空間的 1 份，在本例中，會佔據全部的剩餘空間（1/1）。

這裏是使用的 HTML：

<div class="container">
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
</div>
複製代碼

效果以下：

View on Codepen

如今，將 grid-template-columns 的屬性值修改爲：

grid-template-columns: 100px 30% 2fr 1fr;
複製代碼

效果以下：

看見了嗎？如今是 4 列了，第三列 2fr 佔據剩餘空間的 2/3，第三列 1fr 佔據剩餘空間的 1/3。

繼續在 Firefox 開發者工具中嘗試不一樣的單位和組合，看看效果。

接下來，咱們就要學習如何在網格中放置項目了。這部份內容寫在第二篇裏了，進入到《CSS 網格佈局入門：Part 2》 開始學習吧 ~~

（未完待續）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

瞄~