应使用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 实现响应式双列卡片流，兼顾窄屏单列与宽屏双列，避免 flexbox 错位、safari 兼容问题及高度不齐。
双列卡片流在现代网页中很常见，但直接写 display: flex + flex-wrap: wrap 并设 flex-basis: 50% 很容易在 Safari 或内容高度不一致时错位、留白、换行异常——这不是 bug，是 Flexbox 一维布局的固有局限。
为什么不用 flex: 0 0 50% 做双列
Flexbox 按“容器宽度 ÷ 单项宽度”硬塞，不感知内容高度和换行边界。常见问题包括：
- 最后一行只有一张卡片，右边留大片空白（尤其图片加载延迟后）
- Safari 中卡片突然错位半行，
gap失效或被忽略 - 文字截断或按钮位置浮动，因父容器未约束高度导致
flex-grow计算失准 - 移动端横屏时意外变成三列（因 50% × 3 ≈ 容器宽），无法强制锁定为“最多两列”
grid-template-columns: repeat(2, 1fr) 的陷阱
这个写法看似简洁，但它会强制固定两列，不管屏幕多窄——小屏下卡片会被严重压缩，文字挤成一团，甚至溢出。
真正需要的是“≤2 列”的响应式行为，而不是“永远 2 列”。所以必须用 auto-fit + minmax()：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
}
关键点：
-
320px是单卡最小宽度，低于此值自动收为 1 列（覆盖 iPhone SE 等窄屏） -
1fr表示等分剩余空间，两列时各占 50%，一列时占 100% -
auto-fit会折叠空轨道，比auto-fill更适合卡片列表场景 - 别加
max-width在.card-grid上——它会干扰minmax()的计算基准
卡片内部高度对齐必须用 display: flex; flex-direction: column
双列布局最常被忽略的一环：卡片内容高度不同，导致底部按钮参差不齐。用 align-items: stretch 或 height: 100% 都不可靠，因为 Grid 轨道高度由最长卡片决定，而子项默认不拉伸。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确解法是让每张卡片自己成为弹性容器：
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body {
flex-grow: 1;
}
.card-footer {
margin-top: auto;
}
注意事项：
- 去掉所有
height: 300px类死高设置，否则flex-grow失效 -
.card-footer用margin-top: auto，不是position: absolute—— 后者破坏可访问性和打印样式 - 图片加
object-fit: cover和aspect-ratio: 4/3（不支持时 fallback 用padding-top: 75%+position: relative）
移动端双列失效？检查这三点
即使写了 minmax(320px, 1fr)，仍可能在 iOS 或 Chrome 移动版上退化为单列，原因通常是：
- 父容器（比如
<main></main>或<section></section>）有max-width: 1200px且没配width: 100%，导致 Grid 计算宽度远小于视口 - 卡片内图片未设
max-width: 100%或height: auto，撑破卡片宽度，触发 Grid 自动降列 - 用了
viewportmeta 但遗漏initial-scale=1，某些安卓浏览器会默认缩放，让 CSS 像素变窄
最稳妥的兜底是加一行媒体查询，明确覆盖窄屏逻辑：
@media (max-width: 640px) {
.card-grid {
grid-template-columns: 1fr;
}
}
但这只是调试手段；真正健壮的布局，应依赖 minmax() 自身能力，而非补丁式 media query。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
