Grid 容器属性篇（一） | 每天学一点Grid
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情
Grid 容器属性
Grid 和 flex 类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性。
本文我们先来看一下部分容器属性，display 属性、grid-template-rows 和 grid-template-columns 属性。
1. display 属性
display: grid 可以指定一个容器采用网格布局。
默认情况下，所指定的容器元素为块级元素，但也可以通过 display: inline-grid 将其设成行内元素。
下面是一个 display: grid 的示例：
html 代码片段：
<body>
<span>foo</span>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<span>bar</span>
</body>
css 代码片段：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
.item {
text-align: center;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
line-height: 150px;
}
.item:first-of-type {
background: #ef342a
}
.item:nth-of-type(2) {
background: #00a0a0;
}
.item:nth-of-type(3) {
background: #a0a0ff;
}
.item:nth-of-type(4) {
background-color: skyblue;
}
.item:nth-of-type(5) {
background-color: greenyellow;
}
.item:last-of-type {
background-color: pink;
}
注：grid-template-columns 与 grid-template-rows 属性在稍后会具体进行介绍。
效果：
如果我们将 display 属性修改为 inline-grid，则容器属性会变成一个行内元素。效果如下：
2. grid-template-rows 和 grid-template-columns 属性
容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
在上面的代码中，我们就指定了一个 3 行 3 列的网格，列宽和行高都是150px。
除了使用绝对单位，也可以使用百分比。
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
效果同上:
通过 grid-template-columns 属性和百分比值的配合，我们可以很轻松的写出两栏式布局。
例如：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 70% 30%;
}
repeat 方法
有时候，重复写同样的值非常麻烦，尤其网格很多时。
这时，可以使用 repeat 函数，简化重复的值。
上面的代码用 repeat 改写如下：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
}
repeat 方法接受两个参数，第一个参数是重复的次数（上例是 3），第二个参数是所要重复的值（上例是 150px）。
repeat 方法也可以重复某种模式。
grid-template-columns: repeat(2, 100px 20px 80px);
上面代码定义了 6 列，第一列和第四列的宽度为 100px，第二列和第五列为 20px，第三列和第六列为 80px。
auto-fill 关键字
有时候单元格的大小是固定的，但是我们并不知道几行几列，那么这个时候可以选择 auto-fill 自动填充。该属性表示每一行或每一列都尽可能的容纳固定大小的单元格。
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: repeat(auto-fill ,100px);
}
在上面的代码中，我们在宽高为 450px 的容器中，设置每一个单元的宽为 100px，自动填充。
此时容器就会尽可能多的去容纳单元格，直到该容器不能放置更多的宽度为 100px 的列为止。
效果如下：
fr 关键字
为了方便表示比例关系，网格布局提供了 fr 关键字（fraction 的缩写，意为“片段”）。
如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
效果：
fr 可以与绝对长度的单位结合使用，这时会非常方便。
例如：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 150px 1fr 3fr;
}
效果：
上面代码表示，第一列的宽度为 150px，第二列的宽度是第三列的三分之一。
通过 repeat 方法和 fr 的配合，传统的十二网格布局，写起来也很容易。
例如：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
效果：
注：因为我们的 html 中，容器下面只有 6 个项目，所以只显示出了 6 列。但是很明显这里我们的 wrapper 容器已经被分为了 12 列。
minmax 方法
minmax 方法产生一个长度范围，表示长度就在这个范围之中。
它接受两个参数，分别为最小值和最大值。
例如：
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面代码中，minmax(100px, 1fr) 表示列宽不小于 100px，不大于 1fr。
网格线的名称
grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
{
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
上面代码指定网格布局为 3 行和 3 列，因此有 4 根垂直网格线和 4 根水平网格线。
方括号里面依次是这八根线的名字。
效果：
注：网格布局允许同一根线有多个名字，比如 [fifth-line row-5]。
auto 关键字
auto 关键字表示由浏览器自己决定长度，所以这个时候网格会自动分配空间和网格线名称。
例如：
grid-template-columns: 100px auto 100px;
上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度。
来看一个具体的示例：
.wrapper {
width: 450px;
height: 450px;
background: #f3f3f3;
text-align: center;
display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
示意图如下：
具体效果如下：
