auto-fit 更适合响应式布局，因它会收缩空轨道并均分空间，而 auto-fill 保留空白列；单子项拉伸是 1fr 特性所致，需改用 fit-content 或媒体查询控制。
grid-template-columns 用 repeat(auto-fill, minmax(...)) 为什么没生效
常见现象是容器宽度固定、子元素数量少时，网格项被拉宽甚至撑破容器。根本原因是 minmax() 的第一个参数（最小值）设得太大，或者容器本身没有设置 width 或 max-width，导致浏览器无法判断“可填充多少列”。auto-fill 会尽可能多地创建轨道（哪怕对应位置没内容），而 auto-fit 会把空轨道合并——但两者都依赖父容器有可计算的可用宽度。
- 确保网格容器有明确宽度，比如
width: 100%或max-width: 1200px -
minmax(200px, 1fr)中的200px是单列最小宽度，若容器宽仅 300px，最多只能放 1 列；设成minmax(120px, 1fr)才可能在 300px 宽度下填出 2 列 - 避免对网格项设置固定宽度（如
width: 200px），它会和minmax()冲突
auto-fill 和 auto-fit 的行为差异到底在哪
二者只在“空轨道是否保留”上不同：当子元素数量不足以填满所有生成的列时，auto-fill 保留空白列（表现为右侧留白），auto-fit 会把空列收缩为 0 并让剩余列均分可用空间。实际响应式布局中几乎总是该用 auto-fit。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)));
gap: 12px;
}
换成 auto-fit 后，4 个子项在 800px 宽容器里不会留三列空白，而是让 4 列均分宽度：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)));
gap: 12px;
}
子元素数量极少时（比如只有 1 个）怎么避免拉伸变形
即使用了 auto-fit，单个子项仍会占满整行（因为 1fr 按比例分配）。这不是 bug，是 1fr 的本意。如果希望它保持“自身内容宽度”，就得换策略：
立即学习“前端免费学习笔记（深入）”；
- 把
1fr换成max-content或fit-content(200px)，但兼容性略差（fit-content()在 Safari 旧版需前缀） - 加一层 wrapper：子元素用
display: inline-block或width: fit-content，再配合justify-content: center居中 - 更稳妥的做法是用媒体查询兜底，比如
@media (max-width: 480px) { grid-template-columns: 1fr; }，强制小屏单列不拉伸
JavaScript 动态增删子元素后 grid 不重排怎么办
CSS Grid 是纯声明式的，DOM 变化本身不会触发重新计算列数——只要容器尺寸没变，repeat(auto-fit, ...) 就不会主动调整。问题通常出在 JS 插入元素后未触发重排或容器尺寸被意外冻结。
- 插入后手动触发一次重排：比如读取
offsetHeight，或加个setTimeout(() => {}, 0) - 确认没有给容器设
grid-auto-flow: column，它会让新增项按列堆叠，破坏行内自适应逻辑 - 如果用 React/Vue，确保 key 正确更新，且父容器的 width 没被内联样式或 flex 父级压缩为 0
