该CSS网格布局模块出厂时带有一个新的CSS单元称为fr单元。尽可能简单，fr就是“分数”一词的缩写。新单元可以快速将网格分层成比例的列或行。因此，创建完全响应灵活的网格几乎变得轻而易举。
由于分数单元与网格布局模块一起引入，您可以在支持CSS网格的任何浏览器中使用。如果您还想支持旧版浏览器，这里是一个很好的CSS网格聚合填充，可以让您不仅可以使用fr单元，还可以使用其他网格功能。
基本用法
首先，我们来看一下使用分数单位的基本网格。下面的布局将空格分成三个等宽列和两个等高的行。
在属于HTML由6周的div打上.box阶级，一个内部.wrapper的div。
|
1
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像素的网格。如果您不希望任何差距只是删除此属性。
|
1
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像素），并根据给定的分数对其余部分进行分割。
|
1
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％。
|
1
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使用您需要为每个区域单独使用的属性来命名网格区域。
|
1
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()功能一起使用以获得更简单的语法。如果您只有一个简单的网格，但是当您想要实现复杂的布局（例如嵌套网格）时，可以派上用场，这不是必需的。
|
1
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）即可。
|
1
2
3
4
五
6
|
.wrapper { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 200px; grid-gap: 10px;} |
您可以使用repeat() 多次。例如，以下示例导致一个网格，其中最后三列是前三个列的两倍。
|
1
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单元Rachel Andrew会有一个有趣的博客文章，您可以如何做到这一点。
试用演示
最后，这是我承诺的演示。它使用与本文中第一个示例相同的代码。叉子，看看你可以实现与fr单位。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259312.html