WordPress相册：如何让图片网格最后一行自适应铺满整行？

你当前用CSS Grid实现了3列相册布局，需求是让最后一行图片数量不足3张时自动铺满整行：1张占100%宽度，2张各占50%宽度，同时按比例放大高度。以下是几种可行的实现思路：

思路1：纯CSS Grid方案（无需JS） #

利用Grid的伪元素填补空缺，结合CSS选择器精准定位最后一行的图片，调整列跨度实现铺满：

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 8px;
}

/* 用伪元素填补最后一行的空位，避免Grid自动拉伸其他列 */
.gallery::after {
  content: "";
  grid-column: auto / span 3;
}

.gallery > .img {
  position: relative;
  padding-bottom: 75%; /* 保持4:3的图片比例 */
}

/* 最后一行只剩1张时，跨3列占满整行 */
.gallery > .img:last-child:nth-child(3n+1) {
  grid-column: auto / span 3;
}

/* 最后一行剩2张时，每张跨2列（各占50%宽度） */
.gallery > .img:last-child:nth-child(3n+2),
.gallery > .img:nth-last-child(2):nth-child(3n+1) {
  grid-column: auto / span 2;
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
}

原理：通过repeat(3,1fr)保证三列等宽；伪元素::after填补最后一行的空缺位置，避免Grid默认的拉伸行为；用nth-child和nth-last-child组合选择器，精准匹配最后一行的图片数量，设置grid-column: span来跨列，宽度自动铺满，同时padding-bottom基于宽度计算，保持图片比例不变。

思路2：JavaScript动态控制（灵活适配列数变化） #

如果后续需要调整列数，或者需要更复杂的逻辑，用JS计算图片总数，给最后一行的图片添加类来控制样式：

JS代码 #

const gallery = document.querySelector('.gallery');
const imgItems = gallery.querySelectorAll('.img');
const totalImgs = imgItems.length;
const columnCount = 3; // 可根据需求修改列数
const lastRowImgs = totalImgs % columnCount;

if (lastRowImgs === 1) {
  // 最后一行1张，添加占满整行的类
  imgItems[totalImgs - 1].classList.add('gallery-full-width');
} else if (lastRowImgs === 2) {
  // 最后一行2张，添加各占半行的类
  imgItems[totalImgs - 1].classList.add('gallery-half-width');
  imgItems[totalImgs - 2].classList.add('gallery-half-width');
}

补充CSS #

.gallery-full-width {
  grid-column: auto / span 3;
}
.gallery-half-width {
  grid-column: auto / span 2;
}

原理：通过计算图片总数除以列数的余数，判断最后一行的图片数量，给对应元素添加自定义类，再通过CSS设置跨列属性，实现铺满效果。这种方式适合列数可能动态调整的场景。

思路3：Flexbox替代方案 #

用Flexbox的弹性布局特性，让最后一行的图片自动填充剩余空间：

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gallery > .img {
  flex: 1 1 calc(33.333% - 8px); /* 基础宽度33.33%，减去gap的一半 */
  position: relative;
  padding-bottom: 75%;
}

/* 最后一行1张时，占满整行 */
.gallery > .img:last-child:nth-child(3n+1) {
  flex: 1 1 100%;
}

/* 最后一行2张时，各占50%宽度 */
.gallery > .img:last-child:nth-child(3n+2),
.gallery > .img:nth-last-child(2):nth-child(3n+1) {
  flex: 1 1 calc(50% - 8px);
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

原理：Flexbox的flex-grow属性会让元素自动填充剩余空间，通过选择器匹配最后一行的图片，调整其基础宽度和弹性属性，实现铺满整行的效果。

内容的提问来源于stack exchange，提问作者vespino