auto-fit 与 minmax() 组合是实现 grid 响应式列数的核心，因 auto-fit 塌缩空轨道、minmax() 动态设定列宽阈值，二者协同使浏览器实时计算最优列数。
直接用 grid-template-columns: repeat(auto-fit, minmax()) 就能实现列数随容器宽度自动增减，无需媒体查询——但必须配对使用 auto-fit 和带条件的 minmax()，否则会失效。
为什么 auto-fit + minmax() 是核心组合
Grid 的列数不是靠“写几列”决定的，而是浏览器在渲染时反复尝试塞入尽可能多的轨道，直到塞不下为止。这个“塞不下”的判断依据，就是 minmax() 的第一个参数（最小值）加上 gap 占用的空间。
-
auto-fit会让空余轨道塌缩，已有列均分剩余空间；auto-fill则保留所有可能轨道，容易出现空白列或列宽跳变 -
minmax(250px, 1fr)表示每列至少 250px，但小屏下仍可能强行撑出两列导致溢出 - 真正可控的做法是让最小值“随屏变大”，例如
minmax(max(250px, 34%), 1fr)：宽屏取 250px，窄屏（≈735px 以下）时 34% 对应像素值超过 250px，Grid 自动放弃第三列 - 百分比阈值不是固定值，33.4%～36% 都可试，具体取决于你的
gap大小；gap: 32px建议从 35% 起调
常见错误：minmax() 里误用 min() 或写死固定值
有人写 minmax(min(250px, 50%), 1fr)，结果小屏下第一参数被压到极小（比如 50% → 200px 宽度时只剩 100px），Grid 反而更愿意多塞列，完全背离响应目标。
-
min()是“向下妥协”，适合控制上限，不适合保底；max()才是“向上设卡”，抬高门槛逼 Grid 折叠列数 - 写死
repeat(3, 1fr)或1fr 1fr直接锁死列数，和响应式无关 - 漏设
display: grid或父容器没设定宽度（如width: 100%或max-width），会导致计算基准丢失
gap 和 grid-auto-rows 不是可选项，它们直接影响填充行为
gap 不只是视觉间距，它参与可用宽度计算。例如容器宽 800px、gap: 24px，三列之间就占掉 48px，实际可用于列宽的只有 752px —— 这会改变 auto-fit 最终能塞下的列数。
-
gap接受rem、em，但慎用百分比：它基于容器的 inline size（通常是 width），不是 height，容易在 flex 容器或 table-cell 中表现异常 - 内容高度不一致时，默认
grid-auto-rows: auto会导致各行高低错落；加一句grid-auto-rows: minmax(120px, auto)可统一最小行高，避免视觉割裂 - 若卡片内有图片或固定宽元素（如
width: 100%的<img>），需额外测试其最小可接受宽度，再反推minmax()的百分比值
真正难的不是写出那两行代码，而是理解 minmax() 第一个参数如何与容器宽度动态博弈——它不是静态阈值，而是一个实时参与布局计算的“压力开关”。调参时别只看大屏效果，一定要拖动窗口到临界宽度（比如 480px、768px），观察列数切换是否干净、有无内容挤压或跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
