最稳直接用 display: grid 实现两列图片列表，通过 grid-template-columns: repeat(2, 1fr) 均分宽度、gap: 12px 控制间距、img 宽度 100% 高度自适应，天然解决高度不一致错位问题，现代浏览器全支持且无需兼容妥协。
用 CSS Grid 实现两列图片列表，最稳
直接用 display: grid 是当前最可靠的方式，不用浮动、不用 Flex 的兼容性妥协，现代浏览器（Chrome 60+、Firefox 63+、Safari 10.1+）全支持，且天然处理图片高度不一致导致的错位问题。
关键不是“两列”，而是让每张图自动填满列宽、等高对齐、间距可控：
-
grid-template-columns: repeat(2, 1fr)—— 强制均分容器宽度，比250px或50%更健壮（避免 margin/border 溢出） -
gap: 12px—— 统一控制行列间距，比margin更干净（不触发外边距合并，也不影响最后一行） - 图片统一加
width: 100%和height: auto，防止拉伸变形；若需等高裁剪，再套一层overflow: hidden容器
.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
<p>.image-grid img {
width: 100%;
height: auto;
display: block;
}</p>
Flex 布局也能做，但要注意 wrap 和 min-width
如果项目必须兼容 IE11 或已有 Flex 基础结构，flex-wrap: wrap 可行，但容易因图片原始尺寸差异导致换行错乱——比如一张超宽图占满一行，后面两张挤在下一行。
破局点是给每个图片项设最小宽度，并强制换行：
-
flex: 0 0 calc(50% - 6px)——50%保证两列，-6px抵消gap的一半（因为 gap 是双边） - 必须配
flex-wrap: wrap，否则所有项强行单行 - 父容器要设
margin或padding补偿 gap 缺失（Flex 没原生 gap，得靠 margin 模拟）
.image-flex {
display: flex;
flex-wrap: wrap;
margin: -6px; /* 抵消 gap */
}
<p>.image-flex > <em> {
flex: 0 0 calc(50% - 12px);
padding: 6px; /</em> 模拟 gap */
}</p>
float 方案已过时，除非维护老系统
现在还用 float: left + clear: both 排两列，基本等于主动给自己埋坑：清除浮动易漏、响应式难调、图片撑高父容器失败率高。
唯一适用场景：需要支持 IE9 及更老版本，且无法引入 Polyfill。此时必须手动控制宽度和 box-sizing：
- 每项设
width: calc(50% - 8px)，并显式声明box-sizing: border-box - 用
::after伪元素清除浮动，不能只靠overflow: hidden（图片加载延迟时可能失效） - 图片必须设
vertical-align: top，否则默认 baseline 对齐会留白
图片加载后高度塌陷？加 loading="lazy" 或 placeholder
列表滚动时图片异步加载，会导致网格或 Flex 容器反复重排，视觉跳动明显。这不是布局写错了，是资源加载时机问题。
解决方式优先级从高到低：
- 给
img标签加loading="lazy"（现代浏览器原生支持），配合明确的width/height属性（如width="300" height="200"），浏览器能提前预留空间 - 没尺寸信息时，用
aspect-ratio: 4/3（Chrome 88+、Firefox 89+ 支持），比 JS 计算更轻量 - 极端兼容需求下，用 SVG 占位符：
<img src="placeholder.svg">，再用 JS 切换
别指望单纯靠 CSS 的 min-height 解决——它不响应图片实际尺寸，反而可能遮挡内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
