不能只靠 repeat(auto-fit, minmax()) 实现“最多 N 列”，因其无列数上限；需用 min() 函数（如 repeat(min(4, 100vw / 250), minmax(250px, 1fr))）或媒体查询配合固定 repeat 声明来硬性限制。
不能只靠 repeat(auto-fit, minmax()) 实现“最多 N 列”——它只管最小列宽和填充逻辑，不设上限。真要硬性限制列数，得用显式轨道 + 计算函数或媒体查询。
用 min() 函数动态计算列数上限
这是最简洁的单声明方案，适合中高版本浏览器（Chrome 117+、Firefox 119+、Safari 16.4+）：
-
grid-template-columns: repeat(min(4, 100vw / 250), minmax(250px, 1fr))是可行写法：浏览器会先算100vw / 250得出理论最大列数（比如 1280px → 5.12 → 向下取整为 5），再和 4 取较小值，最终列数不会超 4 -
min(4, max-content)在 Safari 15.6 及更早版本会报错，因不支持max-content作为min()参数；换成min(4, 100vw / 200)更稳妥 - 注意单位一致性：
100vw / 250的结果是纯数字，但若写成100vw / 250px会语法错误 —— CSS 中不允许带单位相除 - 实际列数 =
min(上限值, floor(容器宽度 ÷ 最小列宽))，本质仍是流式计算，不是固定轨道
用媒体查询分段控制（兼容性最强）
当需要在特定断点强制列数上限（如手机 ≤1 列、平板 ≤2 列、桌面 ≤4 列），媒体查询仍是首选，且行为完全可控：
- 每个断点里写死
repeat(4, 1fr)或repeat(2, 1fr)，不依赖auto-fit，避免旧浏览器解析偏差 - 必须配合
minmax()的最小宽度（如minmax(250px, 1fr)），否则小屏下repeat(4, 1fr)会导致单列过窄甚至内容溢出 - 示例：
.container { display: grid; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .container { grid-template-columns: repeat(min(2, 100vw / 250), minmax(250px, 1fr)); } } @media (min-width: 1024px) { .container { grid-template-columns: repeat(min(4, 100vw / 250), minmax(250px, 1fr)); } } - 别忘了加
gap：它参与容器可用宽度计算，影响列数跳变点；用gap而非子项margin，避免干扰轨道尺寸推导
为什么 auto-fit 本身不等于“最大列数”
这是最容易误解的一点：很多人以为 repeat(auto-fit, minmax(250px, 1fr)) 就能卡死列数，其实它只做两件事：
立即学习“前端免费学习笔记（深入）”；
- 根据容器宽度，尽可能多地塞入 ≥250px 的列（例如 900px 容器可塞 3 列）
- 把剩余空间均分给已有列（3 列时每列变成 300px + 均分余量）
- 但它**不会拒绝第 4 列**：只要容器够宽（比如 1050px），它就会生成第 4 列，哪怕你只想最多 3 列
- 真正起“限制”作用的是
min()或媒体查询里的固定数量，auto-fit只负责“填满”和“合并空列”
关键在于：最大列数不是布局行为，而是设计约束；CSS Grid 没有原生 “max-columns” 属性，所有“限制”都得靠组合计算或断点声明来模拟。别指望一行 auto-fit 解决所有问题，尤其当目标浏览器包含 Safari 15 或旧版 Firefox 时，min() 的兼容性风险必须提前验证。
