[译] 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》 开始学习吧 ~~

（未完待续）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

瞄~