grid-template-rows && Array(3)、.map()、Math.floor()

grid-template-rows

指定溶器的行数和每行的行高

grid-template-rows: 100px 200px 300px 100px 100px;

规定容器共5行
第一行的行高为100px
第二行的行高为200px
......

grid-template-rows: repeat(5, 1fr);

相当于

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

repeat()函数可以让我们指定需要多少行（5行），以及行的高度（1fr，即可用空间的几分之一）。

grid-template-columns同理。

代码分析

const nests = [...Array(3)].map(() => ({
  r: Math.floor(Math.random() * R),
  c: Math.floor(Math.random() * C)
}));

Array(3)表示生成一个长度为3的数组，但是生成的数组里没有实际的元素。
[...Array(3)]通过展开运算符...将Array(3)转化成包含实际元素的数组。
[undefined, undefined, undefined]
.map() 会遍历数组中每一个元素，并返回一个新数组。
但map() 不会遍历没有实际元素的数组，所以必须先填充成可迭代的实际元素。
[...Array(3)]控制.map()返回新数组的个数。

Math.floor() 函数总是返回小于等于一个给定数字的最大整数。