移动端多列网格布局应优先使用 display: grid，因其通过 grid-template-columns 一行定义列数与响应行为，比 Flexbox 更直接稳定；Flexbox 仅适合一维排列，强行用于多列易导致换行错位和高度不一致。
移动端响应式布局的高效开发，直接用 display: grid 更省事、更可控，尤其在多列卡片、列表、仪表盘这类二维结构中；Flexbox 仅适合一维流式排列（如导航栏、按钮组），强行用它做“多列网格”会引入不可控换行和高度错位。
移动端多列网格该用 grid-template-columns 还是 flex-wrap
用 grid-template-columns。Flexbox 的 flex-wrap: wrap 本质是让子项“按宽度挤满后换行”，但子项真实宽度受内容长度、字体渲染、padding、border 和 box-sizing 影响，导致同一组卡片在 iPhone SE（375px 宽）和 iPhone 14 Pro（430px 宽）上可能分别显示 1 列和 2 列，甚至第二行第一项被挤到第三行。
Grid 则明确声明列数：grid-template-columns: repeat(2, 1fr) 就是稳稳两列，不看内容；加 gap: 12px 自动处理间距，不用手动算 calc(50% - 6px)——后者在 Safari 中对小数像素处理不稳定，偶发错位。
- 别混用
fr和固定值（如1fr 200px），窄屏下易触发横向滚动 - 记得加
grid-auto-rows: minmax(100px, auto)，防止单张卡片内容少时高度塌陷 - 所有现代 iOS（14.5+）和 Android Chrome（72+）都完整支持，无需前缀或降级
为什么 place-items: center 比 align-items: center 在移动端更稳
place-items: center 是 Grid 的垂直+水平居中简写，但它依赖容器有可分配空间；而 Flexbox 的 align-items: center 必须靠父容器有明确高度（如 min-height: 100vh）才能生效——问题在于移动端键盘弹出时，vh 会失真（Safari 尤其明显），导致内容被顶出视口。
立即学习“前端免费学习笔记（深入）”；
Grid 方案可以显式定义 grid-template-rows: 1fr，把可用空间锁定为一行轨道，不受 vh 动态变化干扰；同时避免了 Flexbox 中因祖先元素没设高度（height: 100% 链断裂）导致的归零失效。
- 不要和
position: absolute或float混用，Grid 容器内绝对定位元素不参与place-items计算 - 若只是单个图标+文字组合居中，Flexbox 渲染路径更短，没必要强切 Grid
性能差异：Grid 渲染更快，但只在复杂场景下明显
Chrome DevTools Performance 面板实测显示：当页面含 50+ 卡片且频繁增删时，Grid 布局比等效 Flexbox 实现平均快 8–12ms。原因在于 Grid 的轨道尺寸可预计算，浏览器能缓存 grid-template-columns 结构；而 Flexbox 每次重排都要重新测量子项 flex-basis，嵌套深时易触发强制同步布局（reflow）。
但对普通页面（box-sizing: border-box 导致的反复重排。
- 避免用
flex做“伪网格”后再加media切列数——每切一次都要重算所有子项宽度 - Grid 的
@media只需改一行grid-template-columns，浏览器直接复用原有轨道逻辑
真正容易被忽略的是：Grid 不是万能解药，它解决不了语义结构混乱的问题。如果卡片内部图文比例失衡、图片未设 max-width: 100%、文字未限制行数，再好的外层布局也会被撑破。布局效率高，前提是内容本身可控。
