应使用 auto-fit 而非 auto-fill 实现响应式卡片铺满，因 auto-fit 收缩空轨道并均分剩余空间；需确保父容器有明确宽度、子项不强制撑宽，且 minmax() 中最小值用固定单位、最大值用 1fr。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能撑起一个真正响应式的网格，但多数人卡在“写了没反应”或“小屏还留白”——问题通常不出在语法，而在父容器、子项约束或单位误用。
为什么写了 auto-fill 却只显示一列？
这不是 auto-fill 失效，而是浏览器根本算不出轨道数。它需要明确的“可用内联尺寸”（即容器宽度）才能推导最多放几列。
- 父容器没设
width、max-width或flex-basis，比如只是display: grid+margin: auto，那它会退化为width: auto，1fr就失去参照 - 父容器被
float、position: absolute或旧版 Flex 干扰，导致 Grid 计算上下文丢失 - 子项内部有未约束的长文本、图片或
white-space: nowrap，强行撑开单个轨道，挤占其他列空间
auto-fill 和 auto-fit 到底该选哪个？
别凭名字猜：用 auto-fill 是为了“预留槽位”，不是为了“填满容器”。它会把所有可能容纳的列都占上位置，哪怕没内容；而 auto-fit 才是让现有卡片均匀铺满整行的常用选择。
-
auto-fill：适合拖拽布局、动态插入卡片前的占位格，右侧常有空白，gap无法消除这部分空隙 -
auto-fit：空轨道直接收缩为 0，剩余列用1fr均分，视觉上无冗余留白——90% 的响应式卡片列表该用它 - 写错成
repeat(auto-fill, minmax(300px, 1fr))却想要铺满效果？换auto-fit立刻解决
minmax() 的两个参数怎么设才不翻车？
minmax() 不是“最小宽度 / 最大宽度”，而是“轨道最小可取值 / 单个轨道能拿到的最大份额”。写错单位或逻辑，浏览器会静默降级，列数就失控。
- 第一个参数必须是固定长度（
px、rem），避免用%（相对父宽，而父宽本身在变）或em（受字体缩放干扰） - 第二个参数只能是
1fr或max-content；写成2fr、auto或max-content混搭1fr都会让浏览器忽略弹性，退化为固定列宽 - 最小值别设太小：低于
160px在中等宽度下易多出一列，导致文字折行混乱；高于320px可能在手机竖屏下直接坍缩为单列（不是 bug，是规则生效）
gap 和 margin 为什么不能混着用？
gap 是 Grid 原生属性，它只作用于网格项之间，不会污染外边距或触发滚动条；而 margin 是每个子项自己的外边距，边缘会多出半倍间距，还得靠 :first-child 或负边距修补。
- 直接写
gap: 1.5rem，所有行列间隙统一，响应式时无需额外@media - 如果设计稿要求“首行顶边无 gap、末行底边无 gap”，说明这不是 Grid 场景——Grid 的
gap天然作用于所有轨道间隙，做不到局部关闭 - 旧版 Safari（iOS 16.4 以下）需加
-webkit-gap前缀，但仅限gap，grid-template-columns本身无需前缀
真正容易被忽略的是：Grid 自适应能力很强，但它的计算完全依赖父容器宽度和子项是否“守规矩”。一旦子项设了 width、flex-basis 或未重置 min-width: auto，整个 minmax() 就形同虚设。先检查子项样式，再调 repeat()，顺序错了，调三天也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
