css grid 布局中 我们不仅可以明确列的大小，也可以通过repeat 来重复填充子项。具体的来说，我们可以指定网格中需要多少列，然后让浏览器来处理响应性。不需要写媒体查询，我们就能够在较小的视口尺寸下显示较小的列，在较宽的屏幕空间中显示更多的列。
只需要一行css就能够做大这一点。这种神奇的、无需媒体查询的响应能力是通过repeat()函数和自动定位关键词实现的。
总而言之，repeat()函数允许我们根据需要重复列的次数。假如，我们需要创建一个12列的网格，我们可以写下面的代码。
.grid {
display: grid;
/* define the number of grid columns */
grid-template-columns: repeat(12, 1fr);
}
这行代码的目的时候，将空间平均的分为12列，每列的宽度均等。每列的宽度会随空间的大小而变化。如果视口宽度比较少的话，那么列就会变的特别小。怎么解决这个问题呢。这个时候可以使用minmax()这个函数，来解决这个问题。
如下面代码所示grid-template-columns:repeat(12, minmax(200px, 1fr));
这样我们保证了每列在小视口宽度的时候，最小宽度有200px，但是这样会导致一个问题，由于列数为12列，那么每行的知识长度有2400px，这样在视口宽度小的屏幕会导致溢出屏幕。如下视频所示：
