真正起效的是 repeat(auto-fit, minmax(200px, 1fr))：浏览器按容器宽度反复尝试塞入最小200px的列，塞不下则自动减少列数，空轨道被收缩；auto-fill会保留空白列，易引发横向滚动。
用 repeat(auto-fit, minmax()) 代替固定列数声明
直接写 grid-template-columns: repeat(4, 1fr) 会导致小屏下强行四列并排，内容被压缩甚至溢出。真正起效的是 repeat(auto-fit, minmax(200px, 1fr))：浏览器按容器宽度反复尝试塞入「最小 200px」的列，塞不下就自动减少列数，且空轨道会被收缩（auto-fit 的关键行为），不是留白。
常见错误是把 auto-fit 写成 auto-fill——后者会保留所有可能轨道，哪怕没内容也占位，小屏下容易出现不可见的空白列，干扰对齐甚至触发横向滚动条。
-
minmax()第一个参数必须是固定单位（如200px、min-content），不能用1fr，否则浏览器无法判断“何时该换行” - 第二个参数优先用
1fr，它按剩余空间均分，比百分比更稳定（%在嵌套 flex 或带 padding 的父容器里常计算错） - 调试时可临时删掉
gap，看卡片是否贴边——若仍不换行，问题大概率在minmax()的最小值设得太小或太大
必须禁用 grid-auto-flow: column
如果卡片始终不换行、堆叠失败，检查是否误加了 grid-auto-flow: column。这个属性会让 Grid 按列优先填充（从上到下填满一列再填下一列），直接破坏默认的行优先流式布局，导致 auto-fit 失效。删掉它，Grid 才能恢复自然的「行内填满 → 换行」行为。
顺带注意：grid-auto-flow: dense 虽能填空缺，但会打乱 DOM 顺序，不适合阅读流内容；多数场景保持默认 row 即可。
立即学习“前端免费学习笔记（深入）”；
用 CSS 变量动态控制列数上限
想在不同断点强制最多 3 列、最少 1 列，别硬写多个 @media 覆盖整条 grid-template-columns，而是改变量值：
::root { --min-card-width: 280px; }@media (max-width: 768px) { :root { --min-card-width: 100%; } }.grid { grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width), 1fr))); }
变量必须定义在 :root 或网格容器自身，子元素才能继承；传字符串（如 --cols: "3"）或漏默认值会导致整条声明被忽略。
- IE11 不支持
auto-fit和 CSS 变量，降级方案只能是grid-template-columns: 1fr+ 媒体查询逐层切列数 - 避免在伪类（如
:hover）里改变量，部分浏览器不触发 Grid 重计算
间距和子项尺寸约束常被忽略
gap 必须随断点重置。桌面设 gap: 24px，手机端若不覆盖，24px 间隙可能撑爆窄屏。每个媒体查询块里，grid-template-columns 和 gap 应成对出现。
子项图片不加约束会撑破网格单元格：img { width: 100%; height: auto; } 是底线；文字内容被压扁？检查是否漏设 min-width: 0（防止 flex/Grid 里文本不折行）。
真正难的不是写出那行 repeat，而是理解 minmax() 的最小值决定了「换行阈值」，而 gap 和子项尺寸共同决定视觉是否拥挤——这两处调不好，auto-fit 就像没装准星的枪。
