图片墙是前端页面里最常见的展示形式之一，商品列表、相册、头像展示几乎都离不开它。要求每行固定显示五张图片，放不下时自动换行，这个需求用现代CSS来实现非常方便，但不同的实现方式在兼容性、灵活性上差别不小。下面介绍两种主流做法，分别是flex弹性布局配合百分比宽度，以及grid网格布局的自动填充方案，并分析各自适合的场景。
方案一：flex布局配合百分比宽度实现自动换行
flex布局是目前使用最广泛的布局方案，实现每行五张图片的核心是两个属性：flex-wrap和宽度计算。默认情况下flex容器是不会换行的，所有子元素挤在一行里，所以必须把flex-wrap设置为wrap，这样当一行放不下时就会自动把多余的元素顶到下一行。
每个图片项的宽度不能写死像素值，而是要用百分比。每行五张，理论上一张占20%，但如果图片之间需要留缝隙，直接给20%会导致一行只能放下四张，因为20%乘以5等于100%，再加上间距就超宽了。解决办法是配合box-sizing: border-box以及内边距来做缝隙，或者用calc()函数动态计算宽度。
<style>
.pic-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
margin: -5px; /* 抵消最外层的间隙 */
}
.pic-item {
width: 20%; /* 每行五张 */
padding: 5px; /* 用内边距制造图片间隙 */
box-sizing: border-box;
}
.pic-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片等比裁剪填充 */
display: block;
}
</style>
<div class="pic-list">
<div class="pic-item"><img src="https://picsum.photos/200/200?random=1" alt="图片1"/></div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=2" alt="图片2"/></div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=3" alt="图片3"/></div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=4" alt="图片4"/></div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=5" alt="图片5"/>/div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=6" alt="图片6"/></div>
<div class="pic-item"><img src="https://picsum.photos/200/200?random=7" alt="图片7"/></div>
</div>上面这段代码里有一个小技巧值得注意：容器设置了负的margin，目的是抵消每个子项内边距带来的最外层空隙，让图片列表边缘和父容器对齐，视觉上更整齐。如果不加这个负margin，列表四周会多出一圈5像素的空白。
另外object-fit: cover是保证图片整齐的关键。因为图片来源各异，原始比例可能不一致，有的横图有的竖图，如果直接拉伸会变形。设置这个属性后，图片会保持自身比例裁剪填充整个容器，所有图片呈现出来的尺寸完全一致。
方案二：grid网格布局一步到位
grid布局天生就是为二维排版设计的，实现固定列数自动换行比flex更简洁，不需要自己计算百分比宽度。核心写法是在容器上定义grid-template-columns，用repeat()函数生成五个等宽列。
<style>
.pic-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 五等分列 */
gap: 10px; /* 行列间隙，一行属性搞定 */
}
.pic-grid img {
width: 100%;
aspect-ratio: 1 / 1; /* 固定宽高比，正方形展示 */
object-fit: cover;
display: block;
}
</style>
<div class="pic-grid">
<img src="https://picsum.photos/300/300?random=1" alt="图片1"/>
<img src="https://picsum.photos/300/300?random=2" alt="图片2"/>
<img src="https://picsum.photos/300/300?random=3" alt="图片3"/>
<img src="https://picsum.photos/300/300?random=4" alt="图片4"/>
<img src="https://picsum.photos/300/300?random=5" alt="图片5"/>
<img src="https://picsum.photos/300/300?random=6" alt="图片6"/>
</div>可以看到grid方案代码量明显更少。gap属性直接处理行列间距，不需要负margin这种取巧手段；aspect-ratio属性直接声明宽高比为1比1，浏览器会自动根据宽度算出高度，不用担心图片高度参差不齐。
grid还有一个flex难以企及的优势：最后一行的对齐效果。flex布局下如果最后一行只有两张图片，这两张会靠左排列，右边留出大片空白，这是正常表现但有时不符合设计预期。而grid由于每一列的位置是网格预先定义好的，元素天然按列位置摆放，不会出现错位问题。当然如果希望最后一行的元素均匀分布，flex配合justify-content反而更灵活，两者各有取舍。
响应式适配与常见问题处理
实际项目中很少让五张图一直固定不变，移动端屏幕窄，一行五张图会小到看不清。响应式的处理思路有两种：一种是媒体查询断点切换列数，另一种是grid的auto-fill自动填充。
<style>
.pic-grid {
display: grid;
/* 每列最小150px，剩余空间自动分配，容器变窄时自动减列 */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.pic-grid img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* 也可以用媒体查询精确控制 */
@media (max-width: 768px) {
.pic-grid {
grid-template-columns: repeat(2, 1fr); /* 小屏两列 */
}
}
</style>auto-fill配合minmax是响应式图片墙的经典写法，它的含义是每列最小宽度150像素，最大平分剩余空间，一行能放下几列就放几列。宽屏时可能一行五六个，窄屏时自动降为两三个，完全不需要写任何断点，代码自适应能力很强。如果业务要求必须严格每行五张，则用repeat(5, 1fr)，再加上媒体查询在小屏时改列数即可。
还有几个常见坑需要提醒。第一，图片默认是行内元素，底部会带几像素的空白间隙，解决方法是给img加display: block或vertical-align: bottom。第二，图片加载前没有高度，会导致布局跳动，可以给容器写死高度或用aspect-ratio占位。第三，如果需要兼容一些老旧浏览器，aspect-ratio和gap在flex中的支持相对较新，可以改用padding-top百分比撑高的老办法来代替宽高比声明。
总结一下选择建议：需要严格控制每行五张且项目本身用flex体系，用方案一；追求简洁代码和天然整齐的网格对齐，直接上grid。两种方案在主流浏览器中支持度都很好，按团队习惯选用即可。