gap是唯一该用的间距控制方式，应清空子项margin、用row-gap和column-gap分开声明以确保兼容性，并避免与padding/margin混用。
gap 是唯一该用的间距控制方式
别给 .card 加 margin，也别用 :not(:last-child) 清除末项边距——这是旧写法遗留的惯性错误。Grid 的 gap 是原生轨道间隙，不触发外边距合并、不干扰列宽计算、不随卡片数量变化而错位。
常见错误现象：写了 gap: 1.5rem 还给 .card 加 margin: 1rem，结果小屏下卡片挤成一线、甚至横向溢出；或者在 Safari 14.1 以下看到空白列或间距消失。
-
gap: 12px是安全值：手机端够呼吸，桌面端不空洞，且避免单位缩放带来的节奏偏移（rem会随font-size变，em易嵌套失控） - 旧版 Safari（gap 在
inline-grid上生效，容器必须是display: grid - 需要兼容 IE11？用
grid-column-gap和grid-row-gap替代，但仅限必要场景，别因此放弃gap语义和维护性
minmax(280px, 1fr) 中的 280px 怎么定
这个最小宽度不是随便写的，它直接决定小屏下单列是否可读、图片是否被压扁、标题是否换行过碎。240px 是 iPhone SE 宽度极限，但带图+标题+描述的卡片，280px 更稳妥；300px 偏保守，适合文字密度高的内容。
容易踩的坑：抄别人代码里的 minmax(300px, 1fr)，结果在 375px 宽的 iPhone 上，auto-fit 算出两列，每列只剩 170px 左右，图片变形、文字断句诡异。
- 用
auto-fit而非auto-fill：前者收缩空轨道，后者保留所有列，小屏下卡片会被硬塞进“隐形列”里变窄 - 别给父容器设
width: 100%或max-width同时又用1fr，Grid 在窄屏下可能算出负值或异常缩放 - 卡片数极少（如只有 1–2 张）时，
auto-fit会自动把剩余空间均分给现有卡片，不会留白——这是它的优势，不是 bug
卡片内部高度失控，为什么 gap 拯救不了
gap 只管卡片之间的空隙，不管单张卡片内部结构。图片撑高、文字截断位置飘忽、按钮悬在半空，这些全是卡片自己没立住，和 Grid 无关。
典型症状：同一行里，一张有图有三行文字的卡片很高，另一张只有标题的卡片很矮，但 Grid 默认 align-items: stretch 把矮卡片也拉高了，底部留大片空白。
- 给
.card加align-self: start，让卡片顶部对齐、不拉伸 - 卡片内部用
display: flex; flex-direction: column; height: 100%，再让主体区域（如.card-body）加flex: 1吸满剩余空间 - 图片必须包一层
overflow: hidden容器，img设width: 100%; height: auto; object-fit: cover;，否则加载抖动会触发重排，等高失效
gap 和 margin 混用时，浏览器到底怎么算间距
这不是“多加一点”的问题，而是布局逻辑冲突。gap 是 Grid 轨道间的固定间隙，由 Grid Layout Engine 直接参与列宽分配；margin 是通用盒模型属性，加在 .card 上后，会参与 Grid 子项的尺寸计算，尤其在 auto-fit 动态重排时，导致轨道宽度误判。
例如：gap: 16px + .card { margin: 8px }，实际行/列间距不是 16px 或 24px，而是不可预测的叠加值——在 Chrome 可能是 24px，在 Safari 14 可能因渲染顺序不同出现间隙跳变。
- gap 不会触发 margin collapse，margin 会——混用等于主动引入不确定性
- 旧教程里用
:not(:last-child)控制底部间距，在 Grid + gap 场景下纯属冗余，还增加选择器权重和维护成本 - 如果真要微调某张卡片的位置，用
margin-left或margin-right单边控制，但必须确认该卡片已脱离 Grid 自动布局（比如用了grid-column: span 2）
真正难的不是写出那行 repeat(auto-fit, minmax())，而是所有子项都得“守规矩”：不抢空间、不锁死尺寸、不绕过 box-sizing: border-box，更不能一边信奉 Grid，一边偷偷往里塞 position: absolute。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
