应优先选用 auto-fit；auto-fit 会合并空轨道使剩余列拉伸填满空间，而 auto-fill 强行预留所有轨道导致视觉空隙，响应式布局中 auto-fit 更合理。
auto-fit 和 auto-fill 在 repeat() 里到底用哪个
绝大多数人写 repeat(auto-fit, minmax(300px, 1fr)) 是对的，但抄成 auto-fill 就容易出视觉空隙——auto-fill 会强行占满容器，哪怕没内容也预留轨道；auto-fit 则会把空轨道合并，让剩余列自动拉伸填满空间。
实际效果差异明显：在宽度刚好容下 3.8 列时，auto-fill 渲染 4 列（最后一列空），auto-fit 渲染 3 列（每列变宽）。响应式布局要的是后者。
- 始终优先选
auto-fit，除非你明确需要“占位留白” -
auto-fit后面不能跟固定数量，比如repeat(auto-fit 2, ...)是无效语法 - 部分旧版 Safari（auto-fit 支持不稳定，若需兼容可加
display: gridfallback 或用媒体查询兜底
minmax() 的第一个参数不能设得太小
写成 minmax(10px, 1fr) 看似“更灵活”，实则破坏响应逻辑：当容器窄到只能塞下 10px 宽度时，浏览器仍会尝试渲染一列，导致文字换行错乱或图标被压扁。
合理下限应匹配内容最小可读尺寸。例如卡片含 14px 文字+16px 图标+内边距，minmax(280px, 1fr) 比 minmax(100px, 1fr) 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 移动端常用范围：280px–320px（适配 iPhone SE / Android 小屏）
- 平板可设为 360px–420px，避免单列过窄造成文字挤在一起
- 如果内容本身是纯图标按钮，可下探到 80px，但必须配合
overflow: hidden防溢出
为什么 grid-template-columns 写在媒体查询里反而更难维护
直接写 @media (max-width: 768px) { grid-template-columns: 1fr; } 看似清晰，但一旦列数规则变复杂（比如“≥768px 三列，≥1024px 四列，≥1280px 五列”），CSS 会迅速膨胀且难以复用。
用 repeat(auto-fit, minmax(...)) 单行解决，才是真正的响应式——它不依赖断点数值，只依赖内容自身尺寸和容器宽度。
- 删除所有基于宽度的列数媒体查询，只保留必要样式（如间距、字体大小）的断点
- 若需在某宽度强制固定列数（例如打印样式），再单独加媒体查询覆盖，而非作为主逻辑
- 注意
gap值也要响应式，比如用gap: clamp(0.5rem, 2vw, 1rem)避免小屏间隙过大
JavaScript 动态改列数时别直接操作 style.gridTemplateColumns
运行时通过 JS 修改 element.style.gridTemplateColumns = 'repeat(5, 1fr)' 会覆盖 CSS 中的 repeat(auto-fit, ...)，失去响应能力——它变成静态列数了。
真正动态调整，应该改的是 minmax() 的第一个参数，或者用自定义属性驱动：
section {
--col-min: 300px;
grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)));
}
然后 JS 只需 section.style.setProperty('--col-min', '200px')，响应逻辑仍在 CSS 引擎内运行。
- 避免用 JS 覆盖整个
grid-template-columns值 - 自定义属性名建议带语义，如
--grid-col-min-width，方便团队理解 - 修改后无需重排，但若涉及高度变化（如文字换行），可能触发重绘
auto-fit 和 minmax() 的组合细节上，尤其是第一个参数的取值和 JS 干预方式——这两处错了，整个响应逻辑就退化成伪响应式。 
