答案是通过 grid-template-columns: repeat(auto-fit, minmax(最小宽度, 1fr)) 实现自动换行效果，利用 auto-fit 确保网格项在空间不足时换行并填充可用空间，minmax() 定义最小宽度和弹性伸缩，从而动态调整列数与布局。
CSS网格布局（Grid Layout）本身并没有一个像Flexbox那样直观的
flex-wrap: wrap属性来实现“自动换行”。说实话，这在初学者那里是一个常见的误区。但我们完全可以通过一套非常强大的组合拳，也就是利用
grid-template-columns属性中的
repeat()函数、
auto-fit或
auto-fill关键字，再搭配
minmax()函数，来巧妙地实现内容项在空间不足时自动调整并“换行”到新的一行。这本质上是让网格轨道根据可用空间和内容尺寸动态生成和调整，从而达到类似“自动换行”的视觉效果。
要实现这种动态的“自动换行”效果，核心在于
grid-template-columns: repeat(auto-fit, minmax(最小宽度, 1fr));这行CSS。我们来一步步拆解它：
首先是
repeat()函数。它允许你重复创建多个网格轨道。但我们不指定具体的重复次数，而是用
auto-fit或
auto-fill来让浏览器自己决定。
接着是
auto-fit或
auto-fill。这两个关键字是实现动态布局的关键。它们告诉浏览器，根据容器的可用空间，尽可能多地放置网格项。
立即学习“前端免费学习笔记（深入）”；
auto-fit
：当容器空间足够容纳更多网格项时，它会尽可能地填充空间。如果一行中没有足够的网格项来填满所有潜在的轨道，auto-fit
会“折叠”那些空闲的、未使用的轨道，让现有的网格项扩展以占据所有可用空间。在我看来，它更符合我们对“自动换行并填充”的直观理解。auto-fill
：与auto-fit
类似，但它不会折叠空闲的轨道。即使没有足够的网格项来填充所有潜在的轨道，auto-fill
也会保留这些空闲轨道，导致网格项可能不会完全填满一行，而是保持各自的宽度，并在左右两侧留出空白。
最后是
minmax(最小宽度, 1fr)。这定义了每个网格轨道的大小规则。
最小宽度
：这是每个网格项的最小宽度。浏览器会确保每个网格项至少有这个宽度。当容器变窄，无法容纳下一个网格项时，这个网格项就会被“推”到新的一行。1fr
：这是一个弹性单位（fraction）。它表示在满足所有网格项的最小宽度后，剩余的可用空间将按比例分配给各个网格项。1fr
意味着每个网格项都会获得一份相等的剩余空间。
综合起来，当容器宽度变化时：
- 浏览器会尝试创建尽可能多的
minmax(最小宽度, 1fr)
轨道。 - 如果当前行
