auto-fill不撑开列宽，只按最小尺寸尽可能多建轨道并保留空轨道；auto-fit则收缩空轨道并将空间均分给有内容的列。
grid-template-columns 用 repeat(auto-fill, ...) 为什么没填满容器？
因为 auto-fill 本身不“撑开”列宽，它只按你给的单列基准（比如 150px）尽可能多地重复列，但不会强制拉伸最后一列去占满剩余空间。常见现象是：容器右边留白，明明还有空间却不再生成新列。
真正起作用的是你的轨道尺寸定义方式：
- 写成
repeat(auto-fill, minmax(150px, 1fr))—— 表示每列至少 150px，有富余空间就均分（1fr），这时会自动填满整行 - 写成
repeat(auto-fill, 150px)—— 每列死定 150px，哪怕剩下 200px 空间，也只再塞一列（剩 50px 白边） - 写成
repeat(auto-fill, minmax(150px, 200px))—— 每列在 150–200px 间弹性缩放，但不会超出 200px，也不均分剩余空间
auto-fill 和 auto-fit 在 grid 中到底差在哪？
区别不在“填不填满”，而在于“空轨道是否保留”。两者都按最小尺寸尝试尽可能多列，但后续处理不同：
-
auto-fill：生成所有可能的列轨道，哪怕某列没内容，轨道仍存在（grid-area可定位到空轨道） -
auto-fit：同样尝试生成列，但会把**空轨道收缩为 0**，然后把释放出的空间重新分配给有内容的列（前提是用了minmax(min, max)且max是fr或弹性值）
所以日常做响应式卡片列表，基本都该用 auto-fit + minmax(250px, 1fr))；只有需要预留空白格子做拖拽占位、或配合 grid-column 显式定位时，才选 auto-fill。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
用 auto-fill 做等宽自适应列时，为什么加了 gap 就错位？
因为 gap 不参与 grid-template-columns 的计算，浏览器先按你写的列数和宽度算好总列宽，再单独加 gap——如果容器宽度不能被「列总宽 + gap 总宽」整除，就会出现最后一列被挤换行或右侧溢出。
解决方法不是调列宽，而是让列宽“知道 gap 的存在”：
- 用
calc()手动减去 gap 影响：repeat(auto-fill, minmax(calc(250px - 20px), 1fr))（假设gap: 20px），但这只适用于固定 gap - 更稳的方案：改用
grid-auto-flow: column+ 单列grid-template-columns: 1fr，靠grid-column: span X控制每项占几列，但失去自动换行语义 - 实际项目中，直接接受 gap 导致的微小不对齐（人眼几乎不可辨），比硬套 calc 更可靠
移动端适配时 auto-fill 卡片宽度忽大忽小，怎么稳住？
根本原因是视口缩放、字体加载、第三方脚本插入 DOM 导致容器宽度动态变化，而 grid 轨道在首次渲染后不会重算（除非媒体查询触发重排）。这不是 auto-fill 的 bug，是 CSS Grid 的静态布局特性。
能做的有限但有效：
- 给容器设
width: 100vw或max-width: 100%，避免父级不定宽传导影响 - 用
@container（需开启实验性 flag）替代媒体查询，让 grid 响应容器自身宽度而非视口 - 极端情况可监听
resize，手动触发element.style.setProperty('--col-count', count)配合repeat(var(--col-count), ...)，但慎用
最常被忽略的一点：确保卡片内部不出现 white-space: nowrap 或未约束的 img，它们会撑破 minmax 下限，导致 grid 认为“这列必须更宽”，进而破坏整行布局节奏。
