唯一解法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，因auto-fit合并空轨道、minmax提供弹性约束、1fr确保均分剩余空间；缺一即退化为单列或留白。
grid-template-columns: repeat(auto-fit, minmax()) 是唯一解法
Grid 本身没有“换行开关”，所谓自动换行，本质是列轨道数量随容器宽度动态增减的视觉结果。必须用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，缺一不可：auto-fit 合并空轨道，minmax() 提供弹性约束，1fr 作为最大值才能均分剩余空间。写成 repeat(auto-fill, minmax(280px, 1fr)) 会保留空轨道，末尾出现大片空白；只写 repeat(auto-fit, 280px) 则浏览器无法推导最大宽度，直接退化为单列。
为什么 auto-fit 比 auto-fill 更适合“不留空白”
auto-fill 会预先生成所有满足最小宽度的列轨道，哪怕没内容也会占位——这导致最后一行左侧有子项、右侧全是空单元格，视觉上就是“留白”。auto-fit 则在生成后立即收缩空轨道，把剩余空间重新分配给实际存在的列，实现真正填满。
- 子项数为 5、最小列宽 280px、容器宽 900px →
auto-fill生成 3 列（840px），第 3 列为空，留白 60px - 同样条件 →
auto-fit生成 3 列后合并空轨道，3 列均分 900px，每列 300px，无空白 - 若子项只有 2 个，
auto-fit仍生成 3 列轨道但立刻收缩，最终只渲染 2 列，各占 450px
常见留白陷阱：子项撑开、box-sizing 和 width: 100%
即使 CSS 写对了，留白仍可能出现，根源常在子项自身：
- 子项写了
width: 100%或flex: 1，强行撑满单元格，覆盖轨道弹性分配逻辑 - 漏掉
box-sizing: border-box，padding/border 超出minmax()的最小值（如设了minmax(280px, 1fr)，但子项 padding-left + padding-right = 32px → 实际需至少 312px 才能放下） - 子项内含长单词或无空格字符串（如 URL），触发
min-width: auto隐式约束，导致该格宽度被拉宽，挤占其他列空间 - 父容器没明确宽度（比如是 flex 子项但没设
flex-basis），Grid 无法计算“能放几列”，回退为单列流式布局
响应式调整只需改 minmax 第一个参数
不要在媒体查询里重写整套 grid-template-columns，只需动态调整 minmax() 的最小值：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
gap: 1rem;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)));
}
}
最后一条 minmax(100%, 1fr) 是关键：小屏下强制单列，避免 Grid 尝试塞入多列却因内容宽度不足而留白。这个 100% 不是 bug，而是让最小宽度等于容器宽度，从而只允许一列存在。
真正卡住的往往不是语法，而是容器宽度是否明确、子项是否偷偷撑开、以及 minmax() 两个参数是否同时合规——第一个必须是 1fr 或 max-content，错一个就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
