， 那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起，这里总和为 5， 即 5 等分。
就是说，我们将有 2 行：第一排占据垂直空间的 2/5 。 第二排占垂直空间的 3/5 。
回到我们的 Tic-Tac-Toe 例子，我们使用
代替 fr
px 。我们想要的是，应该有3行3列。所以，我们只需要用 3 个
1fr 替换 3 个
200px 即可：
.game-board
{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}这里特别需要注意的是：
fr 单位是等分可用空间，或者说剩余空间。看个例子
.game-board
{
grid-gap:2px;
display: grid;
width:300px;
height:200px;
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 50px 1fr;
}布局效果如图：
你会看到
fr 单位是将 总的尺寸 减去 单元格明确尺寸后，在等分剩余空间。
grid-gap 是间隔。repeat() 函数
在某些情况下，我们可能有很多的列和行。在
属性中指定每一个值可能会很乏味。幸运的是，有一个 grid-template
函数 ，就像任何一个循环重复多少次输出某个给定值。它有两个参数。第一个是迭代次数，第二个是要重复的值。我们用 repeat
repeat 函数重写上面的例子。
.game-board
{
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}等价于：
.game-board
{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}grid-template 属性
属性是 grid-template
和 grid-template-rows
的简写语法。 这是它的语法：grid-template: rows/columns;grid-template-columns
我们上面的例子使用这个简写语法后，看起来非常整齐。
