如何缩小图片列表间距？grid-gap设置无效问题求助

你的代码里有几个导致grid-gap效果不符合预期的问题，调整方式如下：

1. 移除多余的<br>标签
   部分.style容器里的<br>会在图片下方添加额外的垂直间距，直接删掉这些标签就能消除不必要的空白。

2. 调整网格列的尺寸规则
   当前grid-template-columns: repeat(auto-fit, minmax(1px, 1fr))会让网格列尽可能填充容器宽度，导致网格项（.style容器）被拉开。可以把minmax的最小值改成图片的宽度（60px），让列宽至少适配图片大小，避免不必要的拉伸：

   grid-template-columns: repeat(auto-fit, minmax(60px, auto));
   

3. 确保网格项没有额外内边距/外边距
   给.style类添加重置样式，避免浏览器默认样式干扰：

   .style {
     margin: 0;
     padding: 0;
   }
   

4. 精准控制间距
   grid-gap（现在推荐用gap属性，语法更简洁）是控制网格项之间的间距，如果你想调整图片本身的间距，也可以给.Img添加margin属性，比如：

   .Img {
     width: 60px;
     height: 60px;
     margin: 5px; /* 图片周围的间距 */
   }
   

修正后的完整代码 #

CSS

#Listed {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
}

.style {
  margin: 0;
  padding: 0;
}

.Img {
  width: 60px;
  height: 60px;
}

HTML

<div id="Listed">
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/1">
  </div>
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/2">
  </div>
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/3">
  </div>
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/4">
  </div>
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/34">
  </div>
  <div class="style">
    <img class="Img" src="https://source.unsplash.com/random/6">
  </div>
</div>

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