90%日常响应式网格该用auto-fit，它收缩空轨道让有内容的列均分剩余空间；auto-fill则保留所有可能列（含空列），易致小屏横向滚动或右侧留白。
auto-fit 和 auto-fill 到底该用哪个
日常响应式网格，90% 场景该用 auto-fit。它会把空轨道收缩为 0，让有内容的列均分剩余空间；而 auto-fill 保留所有可能列（含空列），容易导致小屏下横向滚动或右侧留白。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 在数据少时生成一堆不可见空列，grid-column-end 值跳变但无渲染——其实是 auto-fill 在“老实占位”，不是 bug。
-
auto-fit：适合卡片列表、商品墙、仪表盘等“内容即布局”的场景 -
auto-fill：适合拖拽占位、固定槽位、九宫格对齐等需要预留空白轨道的场景 - 别凭感觉换——二者语法一致，视觉结果却截然相反
minmax() 两个参数怎么写才不翻车
minmax() 是自动填充的灵魂，但第一个参数不是“最小宽度”，而是轨道能取到的最小值；第二个参数不能是 2fr 或 3fr——浏览器会静默降级为 max-content，列宽失控。
正确组合只有：minmax(<length-percentage>, 1fr) 或 minmax(<length-percentage>, max-content)。
立即学习“前端免费学习笔记（深入）”；
- 写成
minmax(280px, 2fr)是错的，2fr在 max 位置无效 -
1fr表示“等分剩余空间”，多个1fr会均分，写2fr没意义 - 若需精确控制（如最多占满一行三分之一），可用
minmax(280px, calc((100% - 2em) / 3))，但会失去弹性，慎用
为什么设置了 auto-fit 还是只显示一列
大概率是父容器没有可计算的内联尺寸（inline size）。CSS Grid 的自动填充依赖容器的明确宽度，如果父元素是 inline-grid、没设 width、或被 flex 容器默认的 flex-basis: auto 干扰，minmax() 中的百分比和 1fr 就无法解析，整行退化为单列。
- 调试建议：给父容器加
outline: 1px solid red，确认它真有明确宽度 - 在
flex容器中使用时，显式设置flex-basis: 100%或width: 100% - 避免用
float或未设width的inline-block包裹 grid 容器 -
display: grid元素不能同时有float，否则网格格式化上下文不成立
子元素不收敛，再好的 grid-template-columns 也没用
设了 minmax(250px, 1fr) 却发现小屏仍只出一列，或者列宽远超预期，根因几乎都在子项自身：图片撑破、文本不折行、flex 子项隐式最小宽度劫持计算。
- 图片必须加
max-width: 100%和height: auto - 子项用了
display: flex且内部有flex: 1？得显式覆盖min-width: 0 - 文字块含
white-space: nowrap或未设overflow: hidden，会强制拓宽轨道 - 父容器被上层
white-space: nowrap或未设width: 100%影响，导致 grid 容器本身宽度异常
真正卡住人的从来不是语法记不住，而是 minmax() 的“最小”会被子元素的隐式约束悄悄绕过。
