根本原因是容器缺少宽度约束，导致 Grid 无法计算可容纳列数；需添加 min-width: 0 或明确 width/max-width 才能使 auto-fit 正常换行并拉伸。
为什么 repeat(auto-fit, minmax(...)) 不换行？
根本原因不是写法错，而是你没给容器设宽度约束。CSS Grid 的 auto-fit 和 auto-fill 都依赖父容器的可用内联尺寸（inline size）来计算能塞几个轨道。如果容器本身宽度无限（比如在 display: block 下未设 width 或 max-width，且子项又没强制换行逻辑），浏览器就无法判断“一行最多放几个”，于是可能只生成一个宽轨道，所有子项挤在同一行。
必须加 min-width: 0 或 width 才生效
常见于 Flex 容器子项、绝对定位上下文或某些 UI 框架（如 Ant Design 的 .ant-card-body）中嵌套 Grid——这些场景下父容器可能有隐式最小宽度限制，导致 Grid 忽略 auto-fit 的收缩行为。此时需显式重置：
-
min-width: 0是最通用解法，告诉浏览器“这个容器可以窄到 0，别硬撑” - 或者直接设
width: 100%/max-width: 100%，明确提供参考尺寸
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
min-width: 0; /* 关键！没有这行，auto-fit 在某些父容器里直接失效 */
}
auto-fit 和 auto-fill 行为差异很实际
二者都配合 repeat() 使用，但结果不同：
-
auto-fit：先按minmax()尝试生成尽可能多的列，然后把**空列合并掉**，剩余列等比拉伸填满容器 -
auto-fill：同样尝试生成列，但**保留所有空列**（显示为 gap 或空白），不合并也不拉伸
所以如果你想要“内容少时也保持网格对齐”，用 auto-fill；想让内容自动占满整行、不留空隙，必须用 auto-fit + min-width: 0。
立即学习“前端免费学习笔记（深入）”；
响应式断点没起作用？检查 minmax() 的单位和范围
minmax(240px, 1fr) 看似合理，但若容器宽度小于 240px，该轨道就无法生成——整行直接塌缩。实际项目中建议：
- 用
minmax(min(240px, 100%), 1fr)避免小屏下轨道消失 - 或搭配媒体查询，在超小屏切回
grid-template-columns: 1fr - 避免在
minmax()中混用em/rem和像素，字体缩放时易出错
Grid 自动换行不是靠“换行属性”，而是靠容器尺寸 + 轨道定义 + 清除最小宽度干扰。漏掉 min-width: 0 这个细节，90% 的“不换行”问题就卡在这儿。
