如何用CSS将多张图片自适应填充容器DIV并最大化空间利用

我有N张正方形图片（形状不影响需求），希望将它们放入一个container div中，并调整图片尺寸以最大化利用容器内的空间。我找到了单张图片或单行图片的实现示例，但未找到二维网格布局的相关方案。目前我通过JS自行计算图片尺寸，但处理边距、内边距等样式属性时难度较大，请问应该使用哪种CSS特性来实现？

示例代码（硬编码了IMG的宽高）：此处最优布局应为4列2行，但需要放大图片以充分利用容器的完整宽高：

img {
  border: 1px orange dotted;
  width: 128px;
  height: 128px;
  padding: 0;
  margin: 0;
}

#container {
  position: absolute;
  left: 64px;
  top: 32px;
  width: 600px;
  height: 400px;
  background-color: #99f;
  overflow: hidden;
  font-size: 0;
}

<div id="container">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
</div>

用CSS Grid就能完美解决这个需求，它专为二维网格布局设计，无需JS计算就能自动分配空间，轻松搞定边距、内边距这类样式问题。

核心实现思路： #

• 容器启用Grid布局，通过grid-template-columns设置列规则，让网格自动适配容器宽度；
• 用伪元素配合grid-auto-rows，保证每个网格单元格都是正方形；
• 图片设置宽高100%+object-fit，填满单元格同时保持比例；
• 用gap统一管理图片间距，替代手动margin，避免计算误差。

修改后的可运行代码： #

img {
  border: 1px orange dotted;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持正方形比例，填满单元格，超出部分裁剪 */
  padding: 0;
  margin: 0;
}

#container {
  position: absolute;
  left: 64px;
  top: 32px;
  width: 600px;
  height: 400px;
  background-color: #99f;
  overflow: hidden;
  display: grid;
  /* 自动生成最优列数：每列最小120px，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: 1fr;
  gap: 0; /* 按需设置间距，比如gap: 4px; */
}

/* 关键技巧：用伪元素强制第一行单元格为正方形，后续行自动继承高度 */
#container::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

#container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

<div id="container">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
  <img src="square-image.png" alt="正方形图片">
</div>

可选调整： #

如果需要固定列数（比如你提到的4列），直接把grid-template-columns改成repeat(4, 1fr)即可，容器会被平均分成4列，每行4张，高度自动适配容器，同样能最大化利用空间。

内容的提问来源于Stack Exchange，提问作者Molly Birk