应使用 minmax(max(150px, 34%), 1fr) 配合 auto-fit 实现响应式列数：宽屏时按150px保底，窄屏（≈490px以下）因34%增大而自动减少列数。
用 repeat(auto-fit, minmax()) 替代固定列数声明
直接写死 grid-template-columns: 1fr 1fr 或 repeat(2, 1fr) 就锁死了列数，无法响应容器宽度变化。真正起作用的是 auto-fit 配合 minmax() 的组合：它让 Grid 引擎在渲染时动态计算“最多能放几列”，而不是由你硬编码决定。
常见错误是把 minmax() 第一个参数写成固定值如 150px，结果小屏下仍强行撑出两列、内容被压缩甚至溢出。正确做法是让这个最小值具备“条件性”——既保底，又随容器变窄而“变大”。
-
minmax(150px, 1fr)只保证单列不小于 150px，但不控制列数上限 -
minmax(max(150px, 34%), 1fr)才能隐式限制最多两列：34% 在宽屏下小于 150px，实际生效的是 150px；当容器缩到约 490px 以下时，34% 对应像素值开始接近甚至超过 150px，Grid 自动放弃第三列；再缩到 - 百分比值不是 magic number，33.4%～36% 都可能有效，取决于你的
gap大小；gap 越大，建议百分比略调高（如 gap: 40px → 用 38%）
为什么 max(150px, X%) 比 min() 更可靠
有人试过 minmax(min(150px, 50%), 1fr)，结果失效——因为 min() 在小屏下会把第一个参数压到极小（比如 50% → 200px 宽度时只剩 100px），反而鼓励多列。而 max() 是“保底逻辑”：只要容器够宽，就取 150px；一旦容器窄到 150px 占比过高，max() 就被迫取那个越来越大的百分比值，从而抬高每列的最小门槛，逼 Grid 折叠列数。
本质是利用了 Grid 计算列数的规则：它会不断尝试往里塞新列，直到剩余空间 minmax() 最小值 + gap。所以抬高这个“最小值”，就是在设卡。
立即学习“前端免费学习笔记（深入）”；
- 别用
min()控制下限，它会让列数不可控地增加 -
max()的第二个参数推荐用 33.4%～36%，避开刚好 33.333…% 导致临界点计算偏差 - 若内容有图片或固定宽元素，需额外测试其最小可接受宽度，再反推百分比
auto-fit 和 auto-fill 的行为差异必须分清
两者都用于 repeat() 的第一个参数，但结果完全不同：auto-fill 会把所有能容纳的列都占满（哪怕后面是空轨道），auto-fit 则会把空轨道收缩掉、把空间均分给现有列。响应式布局几乎只用 auto-fit。
典型错误是复制代码时手误写成 auto-fill，结果小屏下出现大量空白列，或者列宽忽大忽小、内容跳动。
-
auto-fill：适合需要预留轨道做 JS 动态插入的场景，比如拖拽排序面板 -
auto-fit：默认选择，它让列宽随内容自然伸缩，视觉更稳定 - 浏览器兼容性没问题，Chrome 66+、Firefox 61+、Safari 11.1+ 均支持
gap 会影响临界宽度，不能忽略
很多人只盯着列宽，忘了 gap 也是占用容器宽度的一部分。两列布局的实际最小可用宽度是 2 × min-width + gap。如果设了 gap: 20px，那两列并排至少需要 2 × 150px + 20px = 320px；若 gap: 40px，则需 340px。这意味着你调整百分比时，得按这个真实阈值反推。
例如：目标是“max(150px, 45%) 更稳妥——但注意，百分比是相对于容器总宽，不是减去 gap 后的净宽，所以实测仍是必要步骤。
- 不要假设 gap 不影响布局逻辑，它参与所有空间计算
- 在设计阶段就定好 gap 值，再反向校验百分比，而不是先写死百分比再调 gap
- 移动端真机测试比 DevTools 模拟更重要，尤其涉及字体渲染和缩放时
