移动端卡片网格布局优先用display: grid，因其能稳定控制列数与响应行为；线性排列如导航栏、按钮组则用display: flex；Flex强行做多列易因宽度计算误差、Safari小数像素处理不稳定及高度不一致导致错行、塌陷和对不齐。

移动端卡片网格布局，优先用 display: grid；线性排列（如导航栏、按钮组、单行图文）直接上 display: flex。别用 Flex 去硬凑多列——它不是为这个设计的，错行、塌陷、对不齐是常态。

为什么 Flex 在 2 列/3 列卡片中容易错行

Flex 是一维模型，所谓“两列”，本质是靠每个子项手动设 flex: 0 0 50% 或 width: calc(50% - 8px) 挤出来的，但实际宽度受多种因素干扰：

• box-sizing: border-box 没加，padding 和 border 直接撑破 50% 宽度
• Safari 对 calc(50% - 4.5px) 这类小数像素四舍五入不稳定，偶发第三项被挤到下一行
• 父容器有 padding，而子项没用负 margin 补偿，总宽超 100%
• 内容高度不一致时，flex-wrap: wrap 只保证换行，不保证底边对齐，视觉上像错位

Grid 做卡片网格的移动端实操要点

用 Grid 不等于无脑写 repeat(auto-fit, minmax())——那在低端安卓机上 Layout 耗时能翻倍。真正适合移动端的写法是收敛约束：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 列数固定优先：grid-template-columns: repeat(2, 1fr)（2 列）或 repeat(3, 1fr)（3 列）
• 响应式只在关键断点切列数，例如：@media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }
• 必须用 gap，别用 margin 模拟间距——gap 不参与子项盒模型计算
• 防塌陷加 grid-auto-rows: minmax(100px, auto)，避免空内容卡片高度为 0
• 绝对不要混用 fr 和固定像素列（如 1fr 200px），小屏下极易触发横向滚动

Flex 和 Grid 混用的真实分层逻辑

现代移动端页面几乎从不二选一，而是按层级分工：

立即学习“前端免费学习笔记（深入）”；

• grid 做外层区域划分（比如 header/main/footer 的垂直堆叠或平板三区结构）
• 每个区域内再用 flex 处理细节对齐（如 header 里的 logo + nav + search 水平居中）
• 在 grid 容器里给子项又设 display: flex 是合理操作；但若子项内部又套一层 display: grid，大概率是层级职责没分清
• grid 容器内设 justify-content 是无效的——它只响应 justify-items 或 justify-self；同理，flex 子项设 grid-column 浏览器直接忽略

真正容易被忽略的是：Grid 的“自由度”越低，性能越稳。写死列数、禁用 auto-fit、少用命名区域，不是退化，而是面向移动端的真实取舍。