CSS图片网格（Image Grid）间距异常及三列布局失效问题

问题根源 #

• 选择器不匹配：CSS中使用ID选择器#champ-container，但HTML容器是类属性class="champ-container"，导致CSS样式完全未生效。
• 列宽设置错误：grid-template-columns: repeat(3, max-content)会让列宽取图片原始宽度，当容器宽度不足以容纳三列（含间距）时，会出现换行，且无法自适应容器宽度。

修正后的代码 #

CSS代码

.champ-container {
  display: grid;
  grid-gap: 10px;
  /* 方案1：自适应三列，平分容器宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 方案2：固定图片宽度，自动适配列数（适合图片尺寸固定的场景）
  grid-template-columns: repeat(auto-fill, 288px);
  */
}

.champ-container img {
  width: 100%;
  height: auto; /* 维持图片原始比例 */
}

HTML代码

<div class="champ-container">
  <img src="image" alt="图片描述" />
  <img src="image" alt="图片描述" />
  <img src="image" alt="图片描述" />
  <img src="image" alt="图片描述" />
  <img src="image" alt="图片描述" />
</div>

说明 #

• 修正选择器后，CSS样式会正确作用到容器。
• 方案1的1fr单位让三列自动平分容器宽度，图片占满列宽，同时保持10px间距。
• 方案2的auto-fill搭配固定宽度288px，会根据容器宽度自动调整列数，确保图片始终保持原始尺寸，间距不变。

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