auto-fit比auto-fill更适合卡片类栅格，因其会合并空轨道使有内容的列均分剩余空间、避免右侧留白或横向滚动；auto-fill则保留所有可能列位，导致内容少时出现空白列。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是构建响应式栅格模块最直接有效的写法，无需 JS、不依赖框架、一行 CSS 控制列数自适应。其他方案要么逻辑脆弱（如 flex-wrap），要么维护成本高（如手写 float + calc()）。
为什么 auto-fit 比 auto-fill 更适合卡片类栅格
auto-fit 会合并空轨道，auto-fill 则保留所有可能列位——哪怕没内容。九宫格、商品列表、功能入口这类内容驱动型布局，项数常少于最大列数（比如只填了 5 个卡片），若用 auto-fill，小屏下右侧会留大片空白，甚至触发横向滚动。
- DevTools Layout 面板勾选 “Show line numbers”，能看到空轨道是否被合并：没合并就是
auto-fill或auto-fit失效 -
auto-fill适合仪表盘预留插槽；auto-fit才是内容流布局的默认选择 - 如果用
auto-fill后发现最后一行不对齐，不是 CSS 写错了，而是它本就该这样
minmax(250px, 1fr) 的两个参数到底控制什么
这不是“最小 250px 或最大 1fr”，而是：该列宽度必须 ≥ 250px，且 ≤ 它按 1fr 应得的那份剩余空间。第一个参数必须是 <length></length>（如 px、rem），禁用 em——字体缩放会干扰列数计算；第二个参数只接受 1fr 或 max-content，写成 2fr、auto 或 minmax(250px, 2fr) 会被浏览器静默忽略。
- 起始推荐值：
minmax(250px, 1fr)，比 280px 更适配 iPhone SE（375px 宽）等窄屏 - 临界点由容器宽决定：当
容器宽 时，列数自动减少 - 若子项有
min-width: 400px，而容器只有 350px，就会溢出——fr不会强行压缩它
容易被忽略但会导致错位的三个隐形地雷
真正让栅格崩掉的，往往不是 grid-template-columns 写错，而是盒模型、间隙、渲染上下文没对齐。
-
box-sizing: border-box必须全局生效：* { box-sizing: border-box; }，否则padding和border会让实际宽度超 100% -
gap是 Grid 原生间距，不塌陷、不影响盒模型；别在子项上混用margin，尤其配合justify-content: space-between时极易最后一行对不齐 - 覆盖
display: grid会破坏整个布局上下文：小屏媒体查询里写display: block或flex，等于放弃 Grid 的二维能力，后续order、grid-area全失效
最麻烦的不是写出那行 repeat(auto-fit, minmax())，而是记住：Grid 是二维系统，不能和 float、inline-block 或未归一化的 margin 混用；一旦混了，调试时看到的“表现异常”，大概率是布局逻辑冲突，不是 Grid 本身的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
