auto-fit更适合自适应列数，因为它会合并空轨道并将剩余空间均分给有内容的列，使每列等宽撑满整行；auto-fill则保留所有可能轨道（含空列），导致列宽被虚占、内容挤压或右侧留白。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 就能实现列数随容器宽度自动增减，且每列等宽占满整行——但必须配对使用 gap，且不能和 flex 混用。
为什么 auto-fit 比 auto-fill 更适合自适应列数
auto-fit 会合并空的列轨道，让剩余空间被已有列均分；auto-fill 则保留所有生成的列轨道（哪怕没内容），导致列宽被“虚占”，实际显示变窄甚至换行异常。
- 比如容器宽 800px，
minmax(250px, 1fr)理论最多容下 3 列，auto-fit会让这 3 列各占约 33.3% 宽度；而auto-fill可能生成 4 个轨道，其中 1 个为空，剩下 3 列被压缩到 25% 宽度 -
auto-fit在子元素少于最大列数时仍能撑满整行（如只有 2 个子项，也各占 50%）；auto-fill则可能留白 - 旧版 Safari（auto-fit 支持不稳定，若需兼容，得降级为固定列数 + 媒体查询
gap 和 margin 的坑：别在 Grid 里用 margin 模拟间隙
gap 是 Grid 原生属性，不参与 minmax() 计算，只作用于轨道之间；而用 margin 会侵占子元素自身宽度，破坏 1fr 的均分逻辑，尤其在小屏下易触发意外换行。
- 正确写法：
gap: 12px，配合grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) - 错误写法：给子项设
margin: 6px，此时每个子项实际可用宽度 =(100% - 2×6px×2) / 列数，minmax()的 250px 最小值就失效了 - 若必须兼容老浏览器（如 IE11），只能放弃 Grid，改用 Flex +
flex: 1+min-width组合
子项内容过长时，1fr 不等于“安全”
1fr 确保列宽均分，但不阻止子项内部内容溢出——比如长 URL、连续无空格文本、未设 max-width 的图片，都会撑破列宽，破坏布局。
- 通用防御：给子项加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap（仅限单行文本） - 图片场景：子项内
img设width: 100%+height: auto，避免固有尺寸干扰 - 绝对定位元素（如 badge）要设
position: absolute并用inset或top/right控制，别依赖父项 padding
真正容易被忽略的是：Grid 的 1fr 总是相对于整个容器宽度计算，不是当前行。所以当某行只有 1 个子项，它不会自动占满该行——而是占满整个容器宽度（除非你用 grid-auto-flow: column 配合固定行数，但那是另一套逻辑）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
