auto-fill未生成多列主因是父容器宽度不可计算；需确保父容器有明确width，避免inline-grid、flex默认flex-basis: auto等干扰；日常响应式推荐auto-fit而非auto-fill。
auto-fill 为什么没生成多列？先看父容器有没有“可算的宽度”
直接写 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 却只出一列，大概率不是语法错，而是父容器宽度不可控。CSS Grid 的自动填充依赖**可用内联尺寸**（即容器的 width 计算值），如果父元素是 display: inline-grid、没设 width、或被 flex 容器默认的 flex-basis: auto 带偏，浏览器就无法解析 minmax() 里的百分比或 1fr，整行退化为单轨道。
调试建议：
- 给父容器加
outline: 1px solid red，确认它真有明确宽度 - 避免用
float或未设width的inline-block包裹 grid 容器 - 在 flex 容器中使用时，显式设置
flex-basis或width: 100%
repeat(auto-fill, ...) 和 repeat(auto-fit, ...) 到底该选谁？
auto-fill 和 auto-fit 都会按 minmax() 尽可能多地生成列轨道，但后续处理完全不同：
-
auto-fill：保留所有生成的轨道，哪怕某列没内容，轨道仍存在（grid-column可定位到空轨道），适合拖拽占位、固定槽位场景 -
auto-fit：把空轨道收缩为 0，再把释放的空间均分给有内容的列（前提是max是1fr或弹性值）
日常响应式卡片列表，90% 场景该用 auto-fit —— 它才能让两三个项目也撑满整行；而 auto-fill 在小屏下容易生成一堆不可见空列，导致横向滚动或布局错位。
minmax() 两个参数怎么写才不翻车？
minmax() 是自动填充的灵魂，但常见错误是乱用单位：
- 第一个参数（最小值）可以是
px、%、em等绝对/相对单位 - 第二个参数（最大值）**不能是
2fr、3fr** —— 浏览器会静默降级为max-content，列宽失控 - 正确组合只有：
minmax(<length-percentage>, 1fr)</length-percentage>或minmax(<length-percentage>, max-content)</length-percentage> - 写成
minmax(280px, calc((100% - 2em) / 3))虽然可行，但失去弹性，且需手动适配 gap，慎用
gap 导致最后一列换行或右侧留白，怎么稳住？
gap 不参与 grid-template-columns 的轨道计算，浏览器先算列宽总和，再单独加 gap 总宽。如果容器宽度不能被「列总宽 + gap 总宽」整除，就会错位。
实操建议：
- 别硬套
calc(250px - 20px)扣 gap —— 这只对固定 gap 有效，且易受 box-sizing 影响 - 更稳的方案是接受微小不对齐（人眼几乎不可辨），比强行计算更可靠
- 若必须精确控制，改用
grid-auto-flow: column+ 单列grid-template-columns: 1fr，靠grid-column: span X控制跨度，但会失去自动换行语义
真正难搞的不是写法本身，而是容器宽度在字体加载、第三方脚本插入 DOM 后动态变化 —— 这时 grid 轨道不会重算，除非触发媒体查询重排。所以别只信“看起来满了”，要盯紧 devtools 里每列的 computed width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
