auto-fit会收缩空轨道，auto-fill会保留空轨道占位；前者使内容拉伸填满容器，后者可能在右侧留白并产生隐形占位列。
auto-fit 和 auto-fill 到底有什么区别？
区别不在语法，而在渲染行为：两者都用在 grid-template-columns 里配合 repeat()，但 auto-fit 会**收缩空轨道**，auto-fill 会**保留空轨道占位**。实际效果是：用 auto-fit 时卡片能真正“撑满容器”，而 auto-fill 可能在右侧留白（哪怕没内容）。
常见错误是看到文档说“都能自动创建列”就混用，结果在小屏下发现卡片没占满宽度、或者出现意外滚动条——大概率是误用了 auto-fill。
-
auto-fit：适合卡片布局，希望列数随容器动态增减且不留空隙 -
auto-fill：适合需要预留槽位的场景，比如拖拽布局、或后续 JS 动态插入内容 - 两者都要求子项不设固定宽（或设
minmax(0, 1fr)），否则可能触发非预期换行
怎么写一行可伸缩的卡片栅格？
核心写法就这一行：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。其中 280px 是单卡最小宽度，1fr 表示剩余空间均分——浏览器会尽可能多塞列，但每列不会窄于 280px，超出部分自动合并为更少但更宽的列。
别漏掉 grid-auto-rows: minmax(min-content, auto)，否则高度不一致的卡片会导致行高塌陷或错位。
- 避免写成
minmax(280px, 300px)：固定上限会让大屏下卡死在固定列数 - 如果卡片内有图片，记得加
img { width: 100%; height: auto; }，否则可能撑破网格 - 用
gap而不是margin控制间距，后者会破坏网格对齐
为什么设置了 auto-fit 还是只显示一列？
最常见原因是父容器没设宽度或被限制为 display: inline-grid。Grid 的自动列计算依赖**可用行内宽度**，如果父元素本身宽度为 0（比如未设 width 的 div 在 flex 容器里未设 flex-basis），那 auto-fit 就没东西可算。
另一个隐蔽原因是卡片自身写了 width: 100% 或 max-width，导致它拒绝收缩，进而让 Grid 认为“放不下第二列”。
- 检查父容器是否具有明确宽度（如
width: 100%、max-width或 flex 下的flex: 1） - 移除卡片上所有显式
width、min-width（除非必要），让 Grid 控制尺寸 - 用浏览器开发者工具看 computed styles，确认
grid-template-columns计算出的实际列数
响应式断点还要不要加 media query？
大多数情况不用。靠 minmax() + auto-fit 本身就能平滑响应，比 media query 更精细——比如从 3 列变成 4 列，可能只差 1px 容器宽度变化。
但有两个例外值得加断点：一是需要在某宽度下强制单列（比如移动端导航栏），二是要切换卡片结构（比如桌面显示标题+描述，移动端只显示图标）。这时候用 @media (max-width: 480px) 覆盖 grid-template-columns 即可。
- 优先用 Grid 内置响应能力，断点只处理语义性变化，而非单纯列数调整
- 避免在多个断点里重复写
repeat(auto-fit, ...)，容易维护错 - 如果用了 CSS 自定义属性（如
--card-min），可在媒体查询里改它，保持逻辑集中
grid-auto-rows 失效。调试时先临时加个 outline: 1px solid red 看真实占据区域，比猜更有用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
