根本原因是父容器没有可计算的宽度；grid 的 auto-fill 和 auto-fit 依赖父元素 width 计算值推导列数，若父容器为 inline-grid、未设 width 或被 flex-basis: auto 影响，就会退化为单列。
grid-template-columns: repeat(auto-fill, ...) 为什么只出一列？
根本原因是父容器没有可计算的宽度。Grid 的 auto-fill 和 auto-fit 都依赖父元素的内联尺寸（即 width 计算值）来推导能放几列。如果父容器是 display: inline-grid、没设 width、或被外层 flex 容器的 flex-basis: auto 带偏，浏览器就无法解析 minmax() 中的弹性部分，整行退化为单轨道。
调试时直接加 outline: 1px solid red 看父容器是否真有宽度；避免用 float 或未设宽的 inline-block 包裹 Grid 容器；在 Flex 容器里用 Grid 时，显式写 width: 100% 或 flex-basis: 0。
auto-fill 和 auto-fit 到底该选哪个？
区别不在“填不填满”，而在“空轨道是否保留”：
-
auto-fill：按最小尺寸尽可能多建轨道，哪怕某列没内容，轨道仍存在——适合拖拽占位、固定槽位、配合grid-column显式定位 -
auto-fit：同样尝试生成列，但会把空轨道收缩为 0，再把释放的空间均分给有内容的列（前提是max是1fr或弹性值）——日常响应式卡片列表几乎都该用它
写成 repeat(auto-fit, minmax(250px, 1fr))，两三个项目也能撑满整行；而 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 轨道在首次渲染后不会重算——除非触发媒体查询重排。所以响应式场景下，优先用 auto-fit，并确保父容器 width 可靠、无外部干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
