如何用CSS实现动态列网格空单元格时的行项目居中对齐？

问题描述 #

需要将图片放入指定列数的网格布局中，当最后一行的图片数量不足预设列数时，希望该行项目居中对齐，消除左右的空白空间。例如5张图片设置为3列布局时，第一行显示3张，第二行的2张需要居中且无右侧空白；若为6张图片刚好填满3列，则保持原有网格布局不变。同时列数支持动态配置，不局限于固定列数，此前找到的方案均无法适配该需求。

需求要点 #

• 列数支持动态设置，适配任意列数需求
• 最后一行项目数量不足列数时，自动居中并消除左右空白
• 项目填满所有单元格时，保持网格原有布局

现有代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

HTML #

<div class="grid">
  <div class="col">
    <img style="width: 100%;height: 100%" loading="lazy" width="100" height="100" class="gallery__img" src="https://cpmr-islands.org/wp-content/uploads/sites/4/2019/07/test.png">
  </div>
  <div class="col">
    <img style="width: 100%;height: 100%" loading="lazy" width="100" height="100" class="gallery__img" src="https://cpmr-islands.org/wp-content/uploads/sites/4/2019/07/test.png">
  </div>
  <div class="col">
    <img style="width: 100%;height: 100%" loading="lazy" width="100" height="100" class="gallery__img" src="https://cpmr-islands.org/wp-content/uploads/sites/4/2019/07/test.png">
  </div>
  <div class="col">
    <img style="width: 100%;height: 100%" loading="lazy" width="100" height="100" class="gallery__img" src="https://cpmr-islands.org/wp-content/uploads/sites/4/2019/07/test.png">
  </div>
  <div class="col">
    <img style="width: 100%;height: 100%" loading="lazy" width="100" height="100" class="gallery__img" src="https://cpmr-islands.org/wp-content/uploads/sites/4/2019/07/test.png">
  </div>
</div>

解决方案 #

通过CSS变量实现动态列数配置，结合width: fit-content和margin: 0 auto让网格容器自适应内容宽度并居中，从而消除最后一行的空白空间：

修改后的CSS #

.grid {
  --columns: 3; /* 可动态修改此值来设置列数 */
  --gap: 20px;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
  width: fit-content;
  margin: 0 auto;
}

说明 #

1. 使用--columns变量动态控制列数，修改该值即可切换不同列布局
2. width: fit-content让网格容器宽度自适应内容，避免多余的空白空间
3. margin: 0 auto使整个网格在父容器中居中显示
4. 当项目数量刚好填满所有列时，容器自动扩展为完整列宽，保持正常布局

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