auto-fill未填满容器是因为它只尽可能多地重复满足最小宽度的轨道，不主动撑满；受父容器限制、box-sizing、minmax最小值设定及viewport影响。
grid-template-columns: auto-fill 为什么没填满容器
因为 auto-fill 本身不负责“撑满”，它只控制**尽可能多地重复指定轨道**，前提是每个轨道满足最小宽度。如果子项内容太窄、或容器有 padding/margin/边框干扰，视觉上就显得“没填满”。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 在宽屏下只显示 3 列，右侧大片留白；或者列数随窗口缩放跳变剧烈。
- 确保父容器没有
width硬限制（比如width: 600px），否则 grid 容器自身宽度不够，auto-fill就无从“填”起 - 检查是否遗漏
box-sizing: border-box—— 如果父容器有padding，而子项又没设box-sizing，实际可用宽度会少于预期 -
minmax(200px, 1fr)中的200px是最小轨道宽，不是“目标宽”。若容器宽度 ÷ 200px = 4.8，auto-fill会尝试塞 5 条轨道，但最后一条可能被压缩到 200px 以下（除非用minmax(min-content, 1fr)等更灵活写法）
auto-fill 和 auto-fit 的关键区别在哪
它们都用于 repeat() 内部，但行为逻辑相反：一个“宁可空着也不丢”，一个“宁可丢掉也不空着”。
使用场景：做响应式卡片列表时，想让空白区域也保留等宽轨道（比如为了统一 hover 样式或背景色），选 auto-fill；想让所有列严格贴合内容、不留空轨道（比如工具图标栏），选 auto-fit。
-
auto-fill：生成尽可能多的轨道，即使某些轨道最终为空（grid-area未被子元素占据） -
auto-fit：同样先生成轨道，但会把空轨道的尺寸合并进其他轨道（即“折叠”空轨道） - 性能影响：两者在渲染阶段差异极小，但
auto-fill可能创建更多空 DOM 占位，对大量动态插入子项的场景略不利
配合 grid-auto-flow: column 使用 auto-fill 会怎样
不会按预期横向铺满，反而容易导致列数异常或内容错乱。
原因：auto-fill 是为 grid-template-columns 设计的，它只影响**显式列定义**；而 grid-auto-flow: column 控制的是**隐式列的排列方向**，两者作用域不同，强行混用会让轨道数量和自动插入位置脱节。
- 典型错误：
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: column;→ 子项会垂直堆成一列，且每列宽度不可控 - 正确做法：横向填充就用默认
grid-auto-flow: row；真要纵向布局，应改用grid-template-rows: repeat(auto-fill, ...)+grid-auto-flow: column - 兼容性注意：Safari 对
auto-fill+grid-auto-flow: column组合支持不稳定，部分版本会忽略auto-fill
移动端适配中 auto-fill 常见失效点
不是 auto-fill 失效，而是 viewport 设置或字体缩放干扰了 minmax 计算基准。
常见错误现象：iPhone 上列数突然变少、卡片高度塌陷、左右出现滚动条。
- 必须声明
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 会以 980px 渲染，minmax(200px, 1fr)在伪宽屏下计算失准 - 避免在
minmax()中使用em或rem做最小值（如minmax(10em, 1fr)），系统字体放大时会导致最小轨道暴增，挤垮列数 - Android WebView 对
auto-fill的解析存在 1–2px 偏差，建议最小值设为200px而非199px，避开临界抖动
真正难调的不是语法，是 minmax 里那个“最小值”——它既要扛住小屏挤压，又不能在大屏上抢走太多空间。多试两组数值，比查文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
