最稳方案是css grid：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，自动适配小屏单列、平板双列、大屏三列以上；auto-fit收缩空轨道防留白，gap控间距更可靠，align-self: start解决卡片高度不一致导致的底部错位。
用 CSS Grid 实现双列卡片响应式布局，是最稳、最省心的方案；Flexbox 容易在 Safari 或内容异步加载时错行，float 已淘汰，别碰。
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是核心写法
这行代码能自动适配：小屏单列 → 平板双列 → 大屏三列以上，前提是容器宽度够。它不是“固定两列”，而是“至少 300px 宽的列，尽可能多排”。
-
minmax(300px, 1fr)表示每列最小 300px，最大按剩余空间均分 -
auto-fit会让空轨道收缩，比auto-fill更适合卡片列表（避免右侧留白） - 必须配
gap控制间距，别用margin——否则会干扰轨道计算 - 如果真要死守“严格双列”，改用
grid-template-columns: 1fr 1fr，但注意：1fr≠ 50%，它是按可用空间动态分配
卡片高度不一致导致底部错位？加 align-self: start
Grid 默认让所有卡片拉伸对齐（align-items: stretch），但卡片内文字、图片高度不同，就会出现底部参差。这不是 bug，是默认行为。
- 给卡片元素加
align-self: start，让它顶部对齐、不拉伸 - 如果想统一高度，得靠
grid-auto-rows: minmax(200px, auto)+ 显式定义行高 - 别指望只靠外部 Grid 属性解决内部结构问题；卡片内部建议用
display: flex; flex-direction: column+justify-content: space-between固定标题/描述/按钮位置
Flexbox 做双列卡片容易翻车的几个点
不是不能用 Flexbox，而是它在双列卡片场景下容错率低，尤其遇到图片懒加载、字体渲染差异或 subpixel 计算误差时。
- 没设
flex-wrap: wrap→ 卡片被强行压成一行，水平滚动 - 只写
flex: 1 1 250px→ 小屏下卡片实际宽度仍为 250px，加上gap后溢出，文字被压缩 - 用
calc(50% - 8px)但没统一单位（比如混用%和rem）→ 计算失效 - 父容器没设
box-sizing: border-box，padding/gap 叠加后触发横向滚动条
IE11 兼容需求下怎么选
Grid 在 IE11 中支持极差（仅部分旧语法），若必须兼容，降级用 Flexbox 是更现实的选择，而不是回退到 float。
- Flex 容器加
display: flex+flex-wrap: wrap - 卡片用
flex: 0 0 calc(50% - 16px)（假设gap: 32px，每行一个间隙） - 必须加
box-sizing: border-box到卡片上，防止边框/内边距撑破宽度 - 别信“BFC 清除浮动能救布局”——它只防塌陷，不解决自适应，且响应式下极易错行
真正难的不是写哪行 CSS，而是判断“到底要不要严格双列”：如果业务要求左侧导航+右侧内容，用 grid-template-columns: 250px 1fr；如果是卡片流展示，auto-fit + minmax() 才是现代解法。别为了“看起来像两列”硬塞 width: 50%，那只是假响应式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
