grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))是当前最优解，因其自动推导列数、避免留白溢出、无需js或框架；auto-fit合并空轨道使有内容列均分整行，minmax确保最小宽度适配窄屏且弹性分配剩余空间。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能构建稳定、无需 JS、不依赖框架的响应式栅格系统；其他方案（如 flex-wrap、float 或写死 repeat(12, 1fr)）在窄屏、动态内容或高度不一时极易错位、留白或溢出。
为什么 auto-fit + minmax() 是当前最优解
这行声明让浏览器按容器宽度和内容最小尺寸自动推导列数，而不是靠人工写断点或模拟网格：
-
minmax(250px, 1fr)表示每列至少 250px 宽（适配 iPhone SE 等窄屏），超出部分由所有列均分（1fr） -
auto-fit会合并空轨道——卡片只有 3 张时，不会在右侧留 9 个“看不见的列”，而是让这 3 张均分整行宽度 -
auto-fill则保留所有可能列位，小屏下易触发横向滚动或右侧大片空白（DevTools Layout 面板勾选 “Show line numbers” 可直观验证） - 该写法天然兼容 Safari 16.4+、Chrome 105+、Firefox 103+；IE11 不支持，但已可安全忽略
gap 必须用，margin 必须禁
混用 gap 和子项 margin 是导致最后一行对不齐、间距翻倍、窄屏溢出的最常见原因：
-
gap: 1.5rem是 Grid 原生属性，只作用于轨道之间，不塌陷、不干扰盒模型计算 - 给
.card加margin: 1rem会破坏auto-fit的轨道重排逻辑，尤其在配合justify-content: space-between时，末行左右间距完全不可控 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余；gap已覆盖全部需求 - 若需兼容极老环境（如 Safari 15.4 之前），确保容器是
display: grid（而非inline-grid），gap才生效
三处隐形地雷，一碰就崩
真正让栅格失效的，往往不是 grid-template-columns 写错，而是以下三个被忽略的上下文问题：
-
* { box-sizing: border-box; }必须全局启用——漏掉它，padding和border会让实际宽度超 100%，直接压垮minmax()的计算基础 - 卡片内部未约束高度：Grid 只管列数，不管单张卡片是否等高。必须给
.card设display: flex; flex-direction: column; height: 100%，再用flex-grow: 1吸收文字区域，margin-top: auto锚定按钮位置 - 图片未加
overflow: hidden容器 +object-fit: cover：加载抖动或字体缩放会触发重排，导致整行卡片基线跳动；直接设border-radius在img上会裁剪，不是圆角头像的正确解法
最难的不是写出那行 repeat(auto-fit, minmax())，而是记住：Grid 是二维系统，不能和 float、inline-block 或未归一化的 margin 混用；一旦混了，调试时看到的“表现异常”，八成是布局逻辑冲突，不是 Grid 本身的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
