根本原因是容器未正确响应屏幕——grid-template-columns 不自动响应，需确保 viewport 设置、父容器无固定宽限制、box-sizing: border-box 生效，并注意 safari 兼容性及 gap 与 padding/border 的叠加影响。
为什么 grid-template-columns 写了 auto-fit 还是只显示一列
根本原因是容器没“活”起来——grid-template-columns 本身不响应屏幕，它只忠实地执行你写的值。写死 minmax(280px, 1fr)，那在 320px 宽的 iPhone 上，280px 已占满几乎全部宽度，只剩不到 20px 给 gap 和边框，自然只能塞下一列。
- 先检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否漏掉，这是所有移动端响应式的基础 - 确认父容器没被设成
width: 100vw或max-width: 375px这类固定限制 -
box-sizing: border-box必须全局生效，否则 padding/border 会偷偷吃掉可用宽度 - Safari iOS 15.4 之前不支持
min()函数，像min(100%, 320px)这种写法会直接失效，降级用minmax(250px, 1fr)更稳妥
gap 导致横向滚动条怎么破
gap 是额外加在列宽之外的，不是“挤进”列宽里。比如容器宽 320px，两列各 150px，gap: 16px 就意味着总占用 = 150 + 16 + 150 = 316px —— 看似 OK；但一旦加上 border/padding（尤其没设 box-sizing: border-box），实际就超了。
- 用
calc()手动扣减：如grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 16px), 1fr))，但维护成本高 - 更推荐用
minmax()+auto-fit组合，让浏览器自动算，再配padding控制内边距而非依赖gap做唯一间距 - 真要保留
gap，就在容器加overflow-x: hidden遮丑，但这只是掩盖，不是解决
Flexbox 和 Grid 到底该选哪个
不是“哪个更好”，而是“哪个性价比更高”。Grid 写起来少、逻辑清晰，但旧版 Safari（iOS 14 及更早）对 gap 和 auto-fit 支持不稳定；Flexbox 兼容性好到 IE11 都能跑，但需要手动控制换行和最小宽度。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 新项目、明确支持 iOS 15+：直接上
display: grid+repeat(auto-fit, minmax(250px, 1fr)) - 要兼容 iOS 14 或 Android 4.x：用 Flexbox，
flex: 0 1 calc(33.333% - 16px)配媒体查询，在480px下切到flex: 0 1 100% - 别混用：同一容器不用既设
display: flex又设display: grid，CSS 会忽略后者
卡片内容高度不一致导致整行被拉高的问题
Grid 默认按行分配高度，某张卡片文字多、撑高了，整行所有卡片都会被它带高——这不是 bug，是 Grid 的默认行为。
- 加
grid-auto-rows: 1fr能让每行各行独立等高，但仅适用于行内卡片高度差异不大时 - 更通用的解法是给
.card设height: fit-content+min-height，再用overflow: hidden截断过长文本 - 若内容含图片，务必设
img { max-width: 100%; height: auto; }，否则图片会强行撑开卡片
实际项目里最容易被忽略的，是把 gap 当作万能间距工具，却忘了它和 padding、border 的叠加关系；还有人以为写了 minmax() 就万事大吉，结果 viewport 没设，或者父容器被某个 width: 100% 锁死了宽度。这些细节不处理，再漂亮的 CSS 也出不了效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
