移动端grid排版问题主因是safari旧版兼容性、overflow截断gap、列数写死；repeat(3,1fr)强制三列致窄条，应改用auto-fit+minmax；gap失效多因ios15.4前不支持拆写或overflow隐藏裁切；卡片错位需align-items:start而非stretch。
移动端 Grid 排版出问题，大概率不是写错了，而是没避开 Safari 旧版本兼容性、gap 被 overflow 截断、或列数逻辑写死这三类坑。
为什么 repeat(3, 1fr) 在手机上会挤成窄条
写死 repeat(3, 1fr) 就等于告诉浏览器“不管屏幕多小，必须分三列”，结果 iPhone SE 上每列只剩 120px，文字换行错乱、图片变形。这不是 bug，是预期行为。
- 改用
repeat(auto-fit, minmax(280px, 1fr))：每列至少 280px，容器不够宽时自动减少列数 -
auto-fit会收缩空轨道，auto-fill则保留所有可能列（含空白），影响语义和可访问性 - 280px 是经验值，若卡片内含 200px 宽图，建议设为
minmax(240px, 1fr)留出 padding 余量
gap 在 iOS 上突然失效的常见原因
看起来像 gap 没生效，实际可能是 Safari 15.4 之前不支持 row-gap/column-gap 单独写法，或父容器 overflow: hidden 把带 gap 的子项裁掉了。
- 统一用
gap: 12px，别拆写row-gap和column-gap - 检查父容器是否设了
overflow: hidden或硬编码width，必要时加box-sizing: border-box - 在
grid-auto-flow: column布局下，iOS 旧版 Safari 的gap无效，此时换display: flex; flex-wrap: wrap更稳妥
卡片高度不一致导致网格错位怎么 fix
Grid 默认 align-items: stretch，一列内容多就拉高整行，其他卡片被撑开留白——这不是对齐问题，是高度策略没选对。
- 给 grid 容器加
align-items: start，让所有卡片顶部对齐 - 卡片自身设
min-height: 120px（按内容基线定），再配display: flex; flex-direction: column控制内部元素分布 - 避免对图片设
height: 100%，优先用aspect-ratio: 4/3+object-fit: cover，兼容性更好
响应式断点该用 min-width 还是 max-width
用 @media (max-width: 768px) 在 iPad 横屏下会误触发单列，因为它的视口宽度刚好是 768px——这不是媒体查询写错了，是断点逻辑本身有歧义。
- 优先用
min-width断点，例如@media (min-width: 769px)表示“大于 iPad 横屏才启用多列” - 更优解是用 container queries（如果项目支持），直接监听容器宽度而非视口
- 若必须用 media query，断点值避开常见设备硬边界（如 768px、1024px），选 770px 或 1025px 更安全
真正难的不是写出能跑的 Grid，而是判断什么时候该放弃 grid-template-areas 改用行列坐标，什么时候该退回到 Flex 处理单行内联元素——这些边界感，得靠真实项目里反复踩坑才能建立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
