auto-fit 优先于 auto-fill，因 auto-fit 收缩空列并均分剩余空间，而 auto-fill 保留空白列；minmax(min,max) 中 min 是单格最小可取值（须固定值），max 是最大可取值（可为 fr）；父容器宽度未设或 flex 布局限制会导致不换行；连续响应可用 auto-fit+minmax，离散断点仍需 media query。
auto-fill 和 auto-fit 有什么区别，该选哪个
用 auto-fill 还是 auto-fit，直接决定网格项是否“撑满容器”。auto-fill 会按最小尺寸（如 minmax(200px, 1fr) 中的 200px）尽可能多地创建列，哪怕后面列里没内容；auto-fit 则在同样规则下，把空列收缩为 0，并把剩余空间均分给有内容的列。
多数自适应场景应优先用 auto-fit。比如响应式卡片列表，你希望小屏显示一列、中屏两列、大屏四列，且列宽始终均匀拉伸填满容器——这时写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就够了。
常见误用：auto-fill 配合 1fr 容易导致空白列占位，视觉上出现“看不见的间隙”，调试时看到 grid-column-end 值跳变但内容没渲染，大概率是这个原因。
minmax() 的两个参数到底控制什么
minmax(min, max) 不是“最小宽度 + 最大宽度”，而是“单格最小可取值”和“单格最大可取值”。当容器足够宽，所有列都能达到 max（比如 1fr），就按等分分配；当容器变窄，每列不能小于 min（比如 200px），系统自动减少列数来守住这个底线。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
min必须是固定值或min-content/max-content，不能是1fr -
max可以是1fr、2fr、400px，甚至min-content（但很少见） - 写成
minmax(200px, 2fr)意味着：单列至少 200px，最多可拿走两份“剩余空间”，但实际是否拿到取决于其他列是否让出空间
为什么设置了 auto-fit + minmax 还是不换行
最常被忽略的是父容器没设宽度或被弹性布局“锁死”。Grid 的自适应行为依赖于容器的可用内联尺寸（inline size）。如果父元素是 display: flex 且未限制宽度，或本身是 inline 元素，grid-template-columns 里的 auto-fit 就无法触发列数计算。
检查项：
- 父容器是否设置了明确的
width或max-width？或者是否在 flex 布局中加了flex-shrink: 0导致不压缩？ - 是否意外设置了
grid-auto-flow: column？这会让项目按列填充，看起来像不换行 - 子元素是否有
white-space: nowrap或固定宽高强制撑开，导致单个格子超限，挤垮整个换行逻辑
简单验证：临时加一句 border: 1px solid red 到 grid 容器，看它的实际渲染宽度是否符合预期。
响应式断点还用 media query 吗
纯 auto-fit + minmax 已覆盖大部分连续响应场景，不需要为每个断点写 @media。但仍有三个典型情况绕不开媒体查询：
- 需要在某宽度下彻底切换布局方向（比如从
grid-template-columns改成grid-template-rows） - 需配合 JS 控制（例如折叠侧边栏后重新计算网格列数）
- 设计要求“768px 以下固定 1 列，769–1023px 固定 2 列，1024px+ 才启用 auto-fit”——这种离散策略，
minmax无法精确卡死列数
此时可在媒体查询里覆盖 grid-template-columns，例如：
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1023px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
注意：多个媒体查询中的 grid-template-columns 是互斥生效的，无需担心叠加。
