用 auto-fit + minmax(240px, 1fr) 实现无缝响应式网格，需堵住图片撑破、文字换行、容器截断三处漏点，并确保 box-sizing: border-box 和 gap 正确应用。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 就能跑通大多数场景，但“无缝”不是靠一套规则自动达成的——它取决于你是否堵住了图片撑破、文字换行、容器截断这三处漏点。
minmax() 写成 minmax(280px, 1fr) 还是 minmax(280px, 300px)
必须用 1fr，不能写死像素上限。写成 minmax(280px, 300px) 会导致小屏下留白或横向滚动：浏览器会卡在 280–300px 区间内分配列宽，而视口宽度可能根本不够塞两列（比如 500px 宽屏下 2×280=560 > 500），结果强制退成一列却还锁着最小宽度，右侧大片空白。
-
1fr是弹性信号，表示“有剩余空间就均分”，小屏自动退化为单列占满 - 旧版 Safari（15.4 之前）对
minmax(px, fr)支持不稳定，可加-webkit-minmax()前缀，或降级为minmax(240px, max-content)（但后者易溢出，慎用） - 别混用
%和fr，例如minmax(30%, 1fr)会被整个忽略
auto-fit 和 auto-fill 到底该选哪个
画廊、卡片流、内容不确定的网格一律用 auto-fit；九宫格、仪表盘等槽位固定的才用 auto-fill。
-
auto-fit会合并空轨道，让有内容的列拉伸填满整行——这是“无缝”的关键，否则右侧留白明显 -
auto-fill会预留所有可能列位，哪怕只有一张图，也会在右边空出七八个格子 - DevTools 的 Layout 面板勾选 “Show line numbers”，能一眼看出哪些轨道被
auto-fit合并了
图片和文字撑破网格项怎么办
Grid 只负责划线，不管内容怎么撑。90% 的“错位”“跳动”“高度不齐”都出在这三处：
-
<img>必须加max-width: 100%和height: auto，否则按原始尺寸渲染，直接撑破 - 卡片内部若用了
display: flex，子项默认有min-width: auto，得显式写min-width: 0 - 长文本没处理换行：
overflow-wrap: break-word或word-break: break-word缺一不可 - 如果卡片内有固定高图片，记得给
<img>加width: 100%; height: auto;，否则会撑破网格项
小屏还是多列？先查父容器有没有被截
常见假象：桌面正常，手机上还是两列甚至三列。实际是父容器被 max-width、padding 或外层 flex 挤压，Grid 算出来的“可用宽度”远大于视口宽度。
- 用 DevTools 检查网格容器的 computed width，确认它真等于 viewport 宽度
- 确保父级没设
max-width却忘了配合width: 100% - 别在
@media (max-width: 768px)里写display: block，那等于放弃 Grid 优势 - 真正需要媒体查询的点只有：列数突变（如 4→2→1）、
gap缩减（大屏 24px → 手机 12px）、卡片内元素堆叠顺序调整（用order）
最常被忽略的不是写法本身，而是 box-sizing: border-box 和 gap 的组合——少了它们，minmax() 在小屏下极易因 padding/margin 挤压失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
