如何调整CSS Grid布局中图片的水平间距（不改变图片尺寸）

我使用CSS Grid布局展示图片，现有HTML和CSS代码如下：

<section className="section">
  <div className="image-grid">
      <img src="../imagegrid/img1.jpg" alt="grid" ></img>
      <img src="../imagegrid/img2.jpg" alt="grid" ></img>
      <img src="../imagegrid/img3.jpg" alt="grid" ></img>
      <img src="../imagegrid/img4.jpg" alt="grid" ></img>
      <img src="../imagegrid/img5.jpg" alt="grid" ></img>
      <img src="../imagegrid/img6.jpg" alt="grid" ></img>
      <img src="../imagegrid/img7.jpg" alt="grid" ></img>
      <img src="../imagegrid/img8.jpg" alt="grid" ></img>
      <img src="../imagegrid/img9.jpg" alt="grid" ></img>
      <img src="../imagegrid/img10.jpg" alt="grid" ></img>
      <img src="../imagegrid/img11.jpg" alt="grid" ></img>
      <img src="../imagegrid/img12.jpg" alt="grid" ></img>
      <img src="../imagegrid/img13.jpg" alt="grid" ></img>
      <img src="../imagegrid/img14.jpg" alt="grid" ></img>
      <img src="../imagegrid/img15.jpg" alt="grid" ></img>
      <img src="../imagegrid/img16.jpg" alt="grid" ></img>
  </div>
</section>

.image-grid{
    padding: 60px;
    box-sizing: border-box;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8,1fr);
    grid-auto-columns: 100px;
    grid-auto-rows: 200px;
    gap: 15px;
}

.image-grid img{
    margin: 0;
    padding: 0;
    width: 70%;
    height: 100%;
    object-fit: cover;
    border-radius:20px ;
}

.image-grid img:nth-child(odd){
    margin-top: 50px;
}

.image-grid img:nth-child(9){
    opacity: 0;
}

当前布局列间距过大，我希望在不改变图片尺寸、保留现有错落布局样式的前提下，调整图片水平间距，让布局更紧凑。

效果对比：

• 当前效果：
• 目标效果：

核心问题是Grid列数过多（8列）且图片仅占自身宽度的70%，导致水平留白冗余。按以下修改即可实现紧凑布局：

1. 减少Grid列数：将grid-template-columns从repeat(8,1fr)改为repeat(4,1fr)，压缩列的数量，让每列可用空间更集中。
2. 移除图片宽度限制：删除.image-grid img中的width:70%，让图片占满Grid单元格宽度，消除额外留白。
3. 保留错落效果：继续使用nth-child(odd)的margin-top设置，维持原有的错落视觉。
4. 可选优化间距：可适当缩小gap值（比如改为10px），进一步拉近图片间距。

修改后的CSS代码：

.image-grid{
    padding: 60px;
    box-sizing: border-box;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4,1fr); /* 减少列数 */
    grid-auto-rows: 200px;
    gap: 10px; /* 可选：缩小间距 */
}

.image-grid img{
    margin: 0;
    padding: 0;
    height: 100%;
    object-fit: cover;
    border-radius:20px ;
}

.image-grid img:nth-child(odd){
    margin-top: 50px; /* 保留错落布局 */
}

.image-grid img:nth-child(9){
    opacity: 0;
}

这样调整后，图片水平间距会大幅缩小，同时完全保留原有的错落样式和图片尺寸比例。

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