该css网格布局模块出厂时带有一个新的css单元称为fr单元。尽可能简单，fr就是“分数”一词的缩写。新单元可以快速将网格分层成比例的列或行。因此，创建完全响应灵活的网格几乎变得轻而易举。
由于分数单元与网格布局模块一起引入，您可以在支持css网格的任何浏览器中使用。如果您还想支持旧版浏览器，这里是一个很好的css网格聚合填充，可以让您不仅可以使用fr单元，还可以使用其他网格功能。
基本用法首先，我们来看一下使用分数单位的基本网格。下面的布局将空格分成三个等宽列和两个等高的行。
在属于html由6周的div打上.box阶级，一个内部.wrapper的div。
html1
2
3
4
五
6
7
8
<div class=wrapper>
<div class=box box-1>1.</div>
<div class=box box-2>2.</div>
<div class=box box-3>3.</div>
<div class=box box-4>4.</div>
<div class=box box-5>5.</div>
<div class=box box-6>6.</div>
</div>
要使用网格布局模块，您需要将display: grid;css属性添加到包装器。的grid-template-columns属性使用fr单元作为值; 该三列的比为1：1：1。
对于网格行（grid-template-rows属性），我没有使用fr单位，因为只有包装器具有固定的高度才有意义。否则，在某些设备上可能会产生奇怪的结果，但是即使这样，fr设备仍然保持这个比例（这是巨大的）。
该grid-gap属性在框之间添加一个10像素的网格。如果您不希望任何差距只是删除此属性。
css1
2
3
4
五
6
7
8
9
10
11
12
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 10px;
}
.box {
color: white;
text-align: center;
font-size: 30px;
padding: 25px;
}
注意上面的css不包含一些基本的样式，如背景颜色。您可以在文章末尾的演示中找到完整的代码。
变化率当然，你不仅可以使用1：1：1，还可以使用任何比例。以下，我使用1：2：1的分数，也将空间分为三列，但中间的列将是其他两个宽度的两倍。
我也增加了价值，grid-gap以便您可以看到它如何更改布局。基本上，浏览器从视口宽度中扣除网格间隙（在本示例中，网格间距加起来为80像素），并根据给定的分数对其余部分进行分割。
css1
2
3
4
五
6
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 40px;
}
结合fr其他css单位您也可以将该单元与任何其他css单元结合使用。例如，在下面的例子中，我使用了我的网格的比例。fr60% 1fr 2fr
那么这是如何工作的？该浏览器分配该视口宽度的60％到第一列。然后，它将剩余的空间分成1：2分数。
同样的事情也可以写成60% 13.33333% 26.66667%。但坦率地说，为什么会有人想使用这种格式？分数单位的巨大优势在于它提高了代码的可读性。此外，它是完全准确的，因为百分比格式仍然只增加99.9999％。
css1
2
3
4
五
6
.wrapper {
display: grid;
grid-template-columns: 60% 1fr 2fr;
grid-template-rows: 200px 200px;
grid-gap: 10px;
}
除了百分比，你也可以用其他的css单位连同部分单元，例如pt，px，em，和rem。
添加空格 fr如果你不想让你的设计变得混乱，并添加一些空格到你的网格怎么办？分数单位也有一个简单的解决方案。
您可以看到，这个网格有一个空列，而它仍保留所有六个框。对于这种布局，我们需要将空间分成四列而不是三列。所以，我们使用属性的1fr 1fr 1fr 1fr值grid-template-columns。
我们在grid-template-areas属性中添加空列，使用点表示法。基本上，此属性允许您引用指定的网格区域。而且，您可以grid-area使用您需要为每个区域单独使用的属性来命名网格区域。
css1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 10px;
grid-template-areas:
box-1 box-2 . box-3
box-4 box-5 . box-6;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.box-4 {
grid-area: box-4;
}
.box-5 {
grid-area: box-5;
}
.box-6 {
?grid-area: box-6;
}
空白区域不一定必须形成列，它们可以在网格中的任何位置。
该repeat()功能您还可以将该fr单元与该repeat()功能一起使用以获得更简单的语法。如果您只有一个简单的网格，但是当您想要实现复杂的布局（例如嵌套网格）时，可以派上用场，这不是必需的。
css1
2
3
4
五
6
7
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-rows: 200px;
grid-gap: 10px;
}
该repeat(3, 1fr)语法产生相同的布局的1fr 1fr 1fr。下面的布局与第一个例子相同。
如果增加repeat()函数内的乘数，您将有更多列。例如，repeat(6, 1fr)结果是六个相等的列。在这种情况下，我们所有的框都将在同一行中，这意味着只需要为该grid-template-rows属性使用一个值（200px）即可。
css1
2
3
4
五
6
.wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 200px;
grid-gap: 10px;
}
您可以使用repeat() 多次。例如，以下示例导致一个网格，其中最后三列是前三个列的两倍。
css1
2
3
4
五
6
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
grid-template-rows: 200px;
grid-gap: 10px;
}
您也可以与其他css单元结合repeat()使用。例如，您可以使用200px repeat(4, 1fr) 200px有效的代码。
如果您对如何使用css网格模块创建复杂的布局感兴趣，则该repeat()功能和fr单元ra