在CSS网格中自动调整列宽：auto-fill与auto-fit

CSS网格最强大和便捷的功能之一是，除了明确指定列宽之外，我们还可以选择重复填充网格中的列，然后自动放置项目。具体来说，我们可以指定希望网格中有多少列，并让浏览器为我们处理这些列的响应式变化——在较小的视口尺寸上显示较少的列，在屏幕空间允许时显示更多的列，而无需编写任何媒体查询来规定这种响应行为。

我们只需一行CSS就能实现这一点——这行代码让我想起了邓布利多在霍勒斯的公寓里挥动魔杖，“家具飞回了它们原来的位置；装饰品在半空中重新成形，羽毛迅速飞进垫子里；撕破的书本在落到书架上时自我修复……”。

这种神奇、无需媒体查询的响应性是通过使用repeat()函数和自动放置关键字实现的。

简单总结一下，repeat()函数允许你根据需要重复列多次。例如，如果你要创建一个12列的网格，你可以写出如下一行代码：

.grid {
  display: grid;
  /* 定义网格列的数量 */
  grid-template-columns: repeat(12, 1fr);
}

这里的1fr告诉浏览器在列之间分配空间，使每列均等地得到一份空间。也就是说，它们都是流式的等宽列。在这个例子中，网格将始终有12列，无论它有多宽。但正如你可能已经猜到的那样，这种方法在较小的视口上内容会被挤压，所以并不理想。

因此我们需要为列指定一个最小宽度，确保它们不会变得太窄。我们可以使用minmax()函数来实现这一点。

grid-template-columns: repeat(12, minmax(250px, 1fr));

但是，按照CSS网格的工作方式，如果视口宽度不足以容纳所有具有新最小宽度要求的列，则会导致行溢出，因为我们在明确告诉浏览器每行重复12次列。

为了实现换行，我们可以使用auto-fit或auto-fill关键字。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

这些关键字告诉浏览器为我们处理列的大小和元素换行，使得当宽度不足以容纳所有元素而不产生溢出时，元素会换行到新行。我们使用的分数单位还确保，如果宽度允许容纳一部分列但不足以容纳一整列的空间，那么这部分空间将被分配给已有的列，确保在行末不留空隙。

关于auto-fill和auto-fit之间的区别，只有在行宽足以容纳更多列时才会显现出来。如果你使用的是auto-fit，内容将会拉伸以填满整个行宽。而使用auto-fill时，浏览器会允许空列占据空间，就像它们不是空的一样——即使没有网格项，它们也会被分配一定的空间，从而影响其他列的位置和大小。哪种行为是你想要的或更喜欢的完全取决于你自己。目前我还没想到一个auto-fill比auto-fit更适用的用例。如果有这样的用例，请在评论中分享。