auto-fill保留所有可能轨道（含空列）并均分空间，auto-fit仅创建有内容的轨道并拉伸填满；前者适合需预留插槽的场景，后者更适配内容自适应布局。
auto-fill 和 auto-fit 在 repeat() 里到底有什么区别
很多人写 repeat(auto-fill, minmax(200px, 1fr)) 发现网格项没填满容器，或者空白列“悬空”——根本原因是把 auto-fill 当成了“尽量多塞”，但它实际只保证**生成足够容纳所有项目的列轨道**，不压缩也不拉伸；真正会收缩空轨道的是 auto-fit。
简单说：auto-fill 会预留所有可能用到的轨道（哪怕没内容），auto-fit 会把空轨道合并掉，让剩余轨道占满空间。
-
auto-fill：适合需要响应式占位、后续动态插入内容的场景（比如仪表盘预留卡位） -
auto-fit：更常用，等效于“自动填满可用宽度”，视觉上更紧凑 - 两者在
minmax()外层行为一致，但空轨道处理逻辑完全不同
minmax() 的第一个参数太小会导致 auto-fill “失效”
写成 repeat(auto-fill, minmax(1px, 1fr)) 看似能无限细分，但浏览器有最小轨道限制（通常约 10–20px），且 Grid 不会为 1px 占位生成真实列——它会退化成单列或直接忽略约束。
真正可控的做法是用合理下限，比如卡片最小宽 250px，就写 minmax(250px, 1fr)。低于这个值时，Grid 会减少列数，而不是强行挤压。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 下限设得太小 → 列数不稳定，尤其在窄屏下可能只剩 1 列还留大片空白
- 下限设得太大 → 宽屏下也只显示 2–3 列，无法利用空间
- 推荐搭配
min-width媒体查询做兜底，比如屏幕 repeat(1, 1fr)
auto-fill 配合 grid-auto-flow: column 会出什么问题
默认 grid-auto-flow 是 row，元素按行优先填入。如果改成 column，再用 auto-fill，会出现“列数正确但内容错位”的现象：Grid 仍按列轨道数量生成列，但内容从上到下填进第一列，填满才跳第二列——这和视觉预期的“横向自动换行”不符。
除非你明确需要瀑布流式布局（如相册），否则别混用 auto-fill 和 grid-auto-flow: column。
-
auto-fill+grid-auto-flow: row：标准响应式网格，推荐 -
auto-fill+grid-auto-flow: column：列轨道存在，但内容流向垂直，容易误判布局结构 - 真要瀑布流，用
column-count或display: flex; flex-wrap: wrap更直观
为什么设置了 auto-fill 还是只显示一列
最常见原因是容器本身没设宽度，或者父级用了 display: inline-block / float 导致宽度塌陷。Grid 的 auto-fill 是基于**可用行内尺寸**计算列数的，如果容器 width 是 auto 且无约束，它可能只拿到 0 或极小值。
检查顺序建议：
- 确认容器有明确 width（百分比、rem、vw 都可，但不能依赖未设宽的 inline 元素）
- 移除父级的
white-space: nowrap，它会阻止 Grid 容器换行计算 - 避免在 Grid 容器上同时设
flex和grid，CSS 层叠可能导致display被覆盖 - 用浏览器开发者工具看 computed width，不是看 styles 面板里的声明值
auto-fill 的“自动”是有前提的：它不猜测设计意图，只按数学方式铺开轨道。真正难的不是写对语法，而是预判内容尺寸、容器约束和断点边界之间的咬合关系——这些地方一松动，整个网格就偏了。
