最稳方案是用CSS Grid：父容器设display: grid和grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，配gap: 12px、img加width: 100%、height: auto及aspect-ratio或object-fit确保比例与对齐。
用 grid-template-columns: repeat(2, 1fr) 强制两列均分最稳
想让图片在宽屏下严格左右并排、窄屏下自动换行单列，别碰 flex-wrap 或 float。直接上 Grid：父容器设 display: grid，再配 grid-template-columns: repeat(2, 1fr)。它不依赖图片原始尺寸，也不怕内容高度不一致——Grid 天然按轨道对齐，不会像 Flex 那样因某张图太高而撑乱整行。
常见错误是写成 width: 50% 或 flex: 0 0 50%：一旦加了 border、padding 或 gap，就会溢出或留白。而 1fr 是轨道级分配，自动扣除 gap 占位，更干净。
-
gap: 12px统一控制行列间距，比用margin安全（不触发外边距合并，也不影响最后一行对齐） - 每张图加
width: 100%+height: auto，防止拉伸变形 - 若需等高显示且裁剪，给
img加object-fit: cover，并确保父容器有固定高度或aspect-ratio
小屏自动折行为单列？关键看 flex-wrap 和 min-width 的取舍
Grid 默认不折行，repeat(2, 1fr) 在手机上仍强行两列——这不是 bug，是设计使然。真要响应式“宽屏双列、窄屏单列”，得换思路：
- 用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))：最小宽度设为 300px，低于该值就自动退为 1 列 - 不加
min-width保护的图片，在超窄屏（如竖屏 iPhone）可能被压成细条，此时应在img上加max-width: 100%+height: auto，并确认父容器没设死height - 别指望
flex-wrap: wrap配width: 50%来模拟——图片原始宽度差异大会导致第一张占满一行，后面两张挤在第二行，视觉错乱
img 高度不一致时错位？不是布局问题，是尺寸约束没到位
双栏图片上下边缘参差不齐，90% 情况下不是 Grid 写错了，而是图片本身没做尺寸归一化。Grid 只管轨道对齐，不管内容怎么填。
立即学习“前端免费学习笔记（深入）”；
- 统一加
aspect-ratio: 4/3（或你业务需要的比例），浏览器会自动维持宽高比，加载前也不抖动 - 若必须保留原始比例，又想视觉整齐，套一层
div设overflow: hidden+height: 200px，再把img放进去设width: 100%+height: 100%+object-fit: cover - 漏掉
box-sizing: border-box会导致 padding/border 额外加宽，尤其在加了gap后，容易触发横向滚动条
兼容旧浏览器？优先降级到 Flex，但必须加 min-width 和 flex-wrap
IE11 或某些老安卓 WebView 不支持 auto-fit 或 gap，这时 Flex 是唯一可行的现代降级方案——但不能照搬宽屏写法。
- 父容器设
display: flex+flex-wrap: wrap，否则所有图强行单行 - 每个图片项设
flex: 0 0 calc(50% - 6px)（假设目标 gap 是 12px，一半是 6px），并配padding: 6px模拟 gap - 必须加
min-width: 0到图片项上：Flex item 默认min-width: auto，遇到窄图会拒绝缩小，导致换行失效 - 别用
white-space: nowrap强撑，一窄就横向溢出，且无法响应式切单列
真正难的不是写出双栏，而是让它们在各种设备、各种图片尺寸、各种加载状态下都保持对齐和比例。Gap、aspect-ratio、min-width 这三个属性，漏掉任何一个都可能在某个机型上突然崩掉。
