正确写法是grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，但需配合box-sizing: border-box、img{width:100%;height:auto;}、overflow-wrap: break-word及合理gap值，否则小屏易因内容撑破、宽度隐性失效或margin干扰导致错位崩塌。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 就能跑通响应式网格，但“能跑”不等于“不崩”——真正卡住上线的，几乎全是子项失控、gap误配或容器宽度隐性失效。
为什么 minmax(240px, 1fr) 在手机上突然变一列还错位
这不是写法错，是浏览器在小屏下被迫妥协：当容器总宽（比如 iPhone SE 的 375px）小于 240px × 列数 时，它不会强行塞两列，而是降为一列；但如果卡片内图片没设 max-width: 100% 或文字含长 URL，内容就会横向撑破，导致换行异常、滚动条意外出现。
- 检查父容器是否写了
width: 100%或max-width但漏了width: 100%—— Grid 计算依据是容器的可用宽度，不是视口 - 确保所有卡片加了
box-sizing: border-box，否则 padding/margin 会吃掉列宽余量 - 长单词（如
https://example.com/very-long-path）必须加overflow-wrap: break-word，不能只靠word-break: break-all - 图片标签必须带
width: 100%; height: auto;，否则原始尺寸顶开网格项高度，破坏行对齐
auto-fit 和 auto-fill 到底该选哪个
绝大多数响应式卡片布局该用 auto-fit。它会让空轨道自动收缩，剩余空间由已有列均分，视觉更紧凑；而 auto-fill 会保留所有可能轨道（哪怕没内容），容易在少于预期项数时留出大片空白。
- 九宫格类展示（强调“格子感”）可考虑
auto-fill，但必须配合固定gap和显式最小宽度控制留白节奏 - 文章列表、产品卡片等以内容密度优先的场景，
auto-fit是默认选择 - 两者都不解决高度不一致问题：若卡片高度差异大，加
align-items: start防止短卡片被拉伸 - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须是display: grid
gap 看似简单，为什么总被忽略
gap 不只是“加点空隙”，它参与网格轨道计算。用 margin 模拟 gap 会导致最后一行卡片突然变窄甚至叠在一起，因为 margin 不计入轨道分配逻辑。
- 别用
gap: 1rem—— rem 会随根字体缩放，破坏网格节奏；推荐从gap: 12px（手机）起步，按需升到16px（平板）、24px（桌面） - IE11 兼容需降级：用
grid-column-gap: 12px; grid-row-gap: 12px替代gap - 如果卡片 hover 时加
box-shadow导致下方内容跳动，改用filter: drop-shadow()更稳妥 - 务必和
box-sizing: border-box成对使用，否则 padding 会挤压 gap 实际表现
最难的从来不是写出那行 repeat(auto-fit, minmax())，而是让每张图、每个标题、每段文字都“守规矩”：不抢空间、不锁尺寸、不绕过 box-sizing: border-box。漏掉任意一个，无缝感就从那个点开始撕裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
