Grid自动换行靠auto-fit/minmax动态生成列轨道实现，而非flex-wrap；推荐写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));配合gap实现响应式卡片流，无需媒体查询。
Grid 网格布局中实现内容自动换行，关键不是靠“换行”本身（Grid 本身不提供类似 Flex 的 flex-wrap），而是通过合理设置列轨道（grid-template-columns），让容器根据可用空间**动态生成合适数量的列**，从而让子项自然“流式排列”——视觉上就是自动换行效果。
用 auto-fill + minmax() 实现响应式列数
这是最常用、最推荐的方式。核心写法如下：
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));这行代码的意思是：
-
minmax(250px, 1fr)：每列最小宽度 250px，最大可伸展占满剩余空间（即等分） -
auto-fill：尽可能多地重复这个轨道，即使后面没内容也会预留空列（保持网格结构稳定） - 浏览器会根据容器总宽，计算最多能放几列 250px 宽的格子，并自动分配剩余空间，超出就换到下一行
auto-fill vs auto-fit 的区别要清楚
两者都用于动态生成列，但行为不同：
-
auto-fill：不管有没有子元素，都按最大可能数量生成列轨道；空列依然存在，可能留白 -
auto-fit：同样尝试生成最多列，但会把**空的列轨道压缩为 0**，让有内容的列自动撑满整行（更常用，更“紧凑”）
多数场景推荐用 auto-fit，例如：
配合 gap 让间距更自然
仅靠 minmax 控制列宽还不够，加上间隙才像真正的“卡片流”：
- 用
gap: 1rem统一设置行列间距（推荐，比分别设row-gap/column-gap更简洁） - 注意：
gap不会影响minmax中的最小宽度计算，它是在轨道之外额外加的空隙 - 如果需要首尾不留边距，可对子项单独处理（如用
:first-child/:last-child微调 margin，但通常 gap 已足够）
不需要媒体查询也能响应式
这套组合（auto-fit + minmax + gap）本身就是响应式的：
- 容器变窄 → 单列最小宽度达不到，列数自动减少，内容换行
- 容器变宽 → 列数自动增加，直到单列接近设定的最小值
- 无需写一堆
@media，逻辑由 Grid 引擎实时计算
基本上就这些。不复杂但容易忽略的是：真正起“换行”作用的，是 Grid 自动将超出当前行容量的子项放进下一行轨道——而 auto-fit 和 minmax 只是聪明地定义了这些轨道该有多少、多宽。
