移动端多列网格布局推荐使用 display: grid；因其天然支持二维布局，用 grid-template-columns 一行即可定义列数与响应行为，比 flexbox 更直接稳定。
移动端多列网格用 display: grid 更直接
想在手机上实现 2 列或 3 列卡片布局，grid 比 flex 少绕弯。Flexbox 是一维布局，强行做多列得靠 flex-wrap + 宽度控制，但列数不固定、内容高度不一致时容易错行；Grid 天然支持二维行列定义，用 grid-template-columns 一行就能定死列数和响应行为。
实操建议：
- 基础两列：加
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; - 响应式三列（仅 >=768px）：
@media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); } - 避免用
fr单位配px固定列（如1fr 200px），移动端视口窄时易触发横向滚动 - 别忘了设
grid-auto-rows: minmax(100px, auto)防止高度塌陷
flex-wrap: wrap 在小屏下容易列宽失控
Flexbox 做多列本质是“让子项换行”，但列数由单个子项宽度决定，而子项宽度又受内容、字体、padding 影响。结果就是：同一组卡片，在 iPhone SE 和 iPhone 14 上可能分别显示 1 列和 2 列，且第二行第一项可能被挤到第三行。
常见错误现象：
- 加了
flex: 0 0 50%后仍有 3 项排成一行（因父容器 padding 或子项 border 导致总宽超 100%） - 使用
calc(50% - 8px)时，Safari 对小数像素处理不稳定，偶发换行错位 - 没设
box-sizing: border-box，内边距撑破列宽
如果必须用 Flex，建议只用于简单等高横排（如底部导航栏），而非内容卡片网格。
性能与兼容性：Grid 在 iOS 14.5+ 和 Android Chrome 72+ 已无硬伤
过去担心 Grid 兼容性，现在真不用怕。iOS Safari 自 14.5 起完整支持 grid-template-columns、gap 和响应式重定义；Android 端 Chrome 72+（2019 年起）也稳定支持。唯一要绕开的是 subgrid（仍属实验特性），但普通多列完全用不到它。
对比 Flexbox 的兼容性优势已不复存在，反而 Flex 在复杂换行逻辑下更容易触发重排（尤其配合 JS 动态增删项时）。
注意点：
- 不要为兼容 iOS 12 写双布局（Grid + Flex fallback），维护成本远高于收益
- 若需支持微信内置浏览器（X5 内核），确认其版本 ≥ X5 Core 3.78（对应 Chrome 72），基本达标
-
gap在旧版 Safari 需加-webkit-gap前缀，但仅限 iOS 15.4 以下
别忽略 minmax() 和 auto-fit 这两个组合技
写死 repeat(2, 1fr) 看似简单，但遇到不同尺寸设备或动态内容时，列数会僵硬。真正灵活的移动端网格往往用 repeat(auto-fit, minmax(160px, 1fr))) —— 它的意思是：“每列最小 160px，尽可能塞满，列数自动适应”。
这个写法的好处：
- 在 320px 宽屏幕（iPhone SE）上自动变成 1 列
- 在 375px（iPhone 12）上变成 2 列
- 在 768px 平板上可能变成 4 列，无需额外媒体查询
- 比手动写多个
@media更轻量，也更健壮
容易被忽略的是：auto-fit 和 auto-fill 行为不同——前者会收缩空轨道，后者保留所有轨道。移动端几乎只用 auto-fit，否则空白列会撑开容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
