原文链接：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;
}
效果如下：
上面就是一个简单的网格布局了。
世界上最好的网格布局工具
很神奇，对吧？现在调出浏览器开发者工具，尝试改变列宽或行高，或者不使用 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 网格布局的来龙去脉时将提供不少帮助。
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>
效果如下：
现在，将 grid-template-columns 的属性值修改成：
grid-template-columns: 100px 30% 2fr 1fr;
效果如下：
看见了吗？现在是 4 列了，第三列 2fr 占据剩余空间的 2/3，第三列 1fr 占据剩余空间的 1/3。
继续在 Firefox 开发者工具中尝试不同的单位和组合，看看效果。
接下来，我们就要学习如何在网格中放置项目了。这部分内容写在第二篇里了，进入到《CSS 网格布局入门：Part 2》 开始学习吧 ~~
（未完待续）
广告时间（长期有效）
我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。
瞄~
