repeat(auto-fill, minmax())能换行是因为auto-fill配合minmax()动态生成列轨道，而grid-auto-columns仅在显式定位到未声明列时生效，对顺序排列项无效。
为什么repeat(auto-fill, minmax())能换行，而grid-auto-columns不能
Grid 本身没有 flex-wrap 那样的显式换行开关，所谓“自动换行”，其实是列轨道数量随容器宽度动态增减的视觉效果。真正起作用的是 grid-template-columns 中的 auto-fill 或 auto-fit 配合 minmax()；grid-auto-columns 只在子项被显式定位到未声明列（如 grid-column: 5）时才生效，对顺序排列的列表项完全无效。
常见错误现象：只写 display: grid; grid-auto-columns: 1fr;，结果所有项挤在一行、横向溢出、滚动条出现——这不是 bug，是根本没触发轨道生成逻辑。
auto-fill 和 auto-fit 在列表中怎么选
二者都让列数随容器宽度变化，但空轨道处理方式不同，直接影响列表末尾是否留白：
-
auto-fill：预留所有可能列轨道，即使某列没内容也占位 → 小屏下容易撑宽容器、引发横向滚动，适合需预留插槽的场景（如后台仪表盘卡片位） -
auto-fit：铺完后把空列尺寸归零，剩余空间由有内容的列用1fr均分 → 更紧凑，视觉上更“贴合内容”，适合普通列表、按钮组、表单字段 - 当列表项数量 ≥ 当前列数时，二者行为完全一致；差异只在内容不足时显现
minmax(300px, 1fr) 的参数为什么不能乱写
minmax() 不是“最小宽 / 最大宽”，而是“轨道最小可取值 / 单个轨道最大能分到的份额”。写错会导致浏览器静默降级、布局失控：
立即学习“前端免费学习笔记（深入）”；
- 第一个参数必须是
<length>或<percentage>，比如280px、25vw；写成1fr会直接失效 - 第二个参数只能是
1fr或max-content；写2fr、calc(33%)等均无效，浏览器会忽略并回退到max-content，列宽失去弹性 - 最小值（如
300px）必须 ≥ 列表项实际渲染宽度（含padding、border），否则 Safari 和部分安卓 WebView 会强制回退为单列
为什么写了 repeat(auto-fit, minmax(300px, 1fr)) 还是只有一列
这不是语法问题，而是 Grid 没法算出“能放几列”——它需要容器的**可用内联尺寸**作为计算基准。以下三点最常导致失败：
- 父容器是
display: flex子项，但没设flex-basis或明确width，导致其宽度为auto - Grid 容器自身没设
width或max-width，又不在有约束的上下文中（比如直接子元素于body） - 列表项写了
width: 100%或flex: 1，强行撑满单个网格单元，覆盖了轨道分配逻辑 - 忘了给子项设
box-sizing: border-box，padding撑出额外宽度，导致实际内容宽 >minmax()的最小值
调试时最容易被忽略的，是这些不报错但会让布局“怪怪的”细节：它们不会中断渲染，却悄悄破坏了轨道计算的前提条件。
