auto-fit比auto-fill更适合等宽卡片流，因其会合并空轨道使剩余空间被已有卡片均分，而auto-fill保留所有列轨道导致卡片撑开或留白错位。
为什么auto-fit比auto-fill更适合等宽卡片流
因为auto-fit会合并空轨道，让剩余空间被已有卡片均分；而auto-fill会保留所有生成的列轨道（哪怕没内容），导致卡片被“撑开”或留白错位。
常见错误现象：卡片宽度忽大忽小、右侧出现诡异空白、缩放窗口时布局跳变。
-
auto-fit在无足够内容时自动收缩未填充的列，使minmax()的最小值真正生效 -
auto-fill始终按最大可能列数生成轨道，容易触发minmax()的“最大值限制”，让卡片被迫拉宽 - 响应式断点少时，用
auto-fit能省掉一堆媒体查询
minmax(280px, 1fr)里的1fr到底分配什么
它分配的是“减去所有固定尺寸后的剩余自由空间”，不是整个容器宽度。只要所有卡片都满足280px最小宽，1fr就让它们等分剩余空间——这才是等宽的关键。
使用场景：卡片内容长度不一、需避免换行截断、又要保持视觉节奏一致。
立即学习“前端免费学习笔记（深入）”；
- 若设
minmax(280px, 2fr)，两列时每列占2fr，实际宽度会翻倍，失去等宽意义 - 若容器总宽是
1200px，4列即每列300px；3列则每列400px——1fr保证的是“均分”，不是“固定” - 注意
gap不参与1fr计算，但会占用容器空间，影响最终列数
移动端卡片塌陷？检查grid-template-columns是否被覆盖
最常踩的坑：父容器有max-width但没配width: 100%，或卡片内部img没设max-width: 100%，导致子元素撑破网格项，触发浏览器回退到单列流。
错误信息示例：Computed width of grid item is larger than its track size（非真实报错，但表现类似）
- 给卡片容器加
width: 100%，防止内联块级元素溢出 - 图片/视频统一加
max-width: 100%; height: auto; - 避免在卡片上写
width: 300px这类绝对值，会和minmax()冲突 - 调试时临时加
outline: 1px solid red看网格项实际占位
IE不支持怎么办？别硬上auto-fit
IE10+只支持auto-fill，且minmax()完全不认。强行兼容会退化成单列或固定列数，失去响应能力。
性能影响：现代浏览器中auto-fit + minmax是纯CSS计算，无JS重排，比Flex + JS检测列数快得多。
- 真要兼容IE，用
@supports (display: grid)做特性检测，IE直接走Flex fallback - 不要用
grid-template-columns: repeat(4, 1fr)模拟——它无法响应容器变化 - 部分安卓UC/旧版QQ浏览器对
auto-fit解析异常，建议加min-width: 0到卡片项防溢出
repeat(auto-fit, minmax(280px, 1fr))，而是控制住卡片里所有可能撑破网格的子元素。 
