原文链接：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》开始学习吧 ~~

（未完待续）

广告时间（长期有效）

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

瞄~