直接用grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) + gap + 子项约束可实现视觉无跳变列数切换，但需闭环三处细节：子项内容退让（图片宽高约束、长文本换行）、box-sizing: border-box与gap成对使用、align-self: start确保顶部对齐。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) + gap + 子项约束，就能实现视觉上“无跳变”的列数切换；但所谓“无缝”，实际是三处细节闭环的结果——不是 Grid 自动给的，而是你亲手控住的。
为什么 auto-fit + minmax() 在小屏会突然错位
常见现象：iPhone SE 上卡片堆成一列，但文字换行异常、图片撑破高度、最后一行留白。这不是写法错，是内容没退让。
-
minmax(280px, 1fr)在 375px 宽度下强行塞两列 → 每列只剩 187.5px，低于下限，浏览器压缩内容而非换行 - 子项内图片没设
width: 100%; height: auto;，原始尺寸顶开网格项，破坏行高对齐 - 长单词（如
https://example.com/very-long-path）没加overflow-wrap: break-word;，溢出容器边界 - 卡片里嵌了 Flex 容器，内部子项默认
min-width: auto，得显式写min-width: 0;防止拉伸
gap 和 box-sizing 必须成对出现
gap 看似只是加间距，但它参与轨道计算。如果容器没设 box-sizing: border-box，padding 就会吃掉列宽余量，导致总宽超限、列数骤减甚至触发横向滚动条。
- 务必在网格容器上写
box-sizing: border-box;（全局重置也行） -
gap: 12px是手机端安全起点；避免用gap: 1rem，rem 会随根字体缩放，破坏网格节奏 - IE10+ 兼容写法：用
grid-column-gap和grid-row-gap替代gap，防止空白列塌陷 - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须是display: grid
卡片高度不一致时顶部对齐失效
默认 align-items: stretch 会让短卡片被拉高，视觉上像“悬浮”，和长卡片不对齐。
立即学习“前端免费学习笔记（深入）”；
- 加
align-self: start;到每个网格项，强制顶部对齐 - 若用
grid-template-areas布局固定板块，也要在对应区域项上加该声明 - 别依赖父容器统一设
align-items—— 某些子项（如含flex的标题栏）可能覆盖继承值
真正难的不是写出那行 repeat(auto-fit, minmax())，而是所有子项都得“守规矩”：不抢空间、不锁尺寸、不绕过 box-sizing: border-box。一旦某张图漏了 max-width: 100%，或某个标题忘了 overflow-wrap，整个网格的“无缝感”就从那个点开始撕裂。
