CSS Grid固定高度可变宽度图片画廊布局问题求助

我明白你想要的效果：图片画廊保持固定行高，同时每个单元格宽度由图片自身比例决定，而非强行填满剩余空间。你当前的问题出在grid-template-columns的设置上，auto值会让网格列自动拉伸以填充容器宽度，导致单元格占用多余空间。

下面是调整后的解决方案：

核心修改点 #

• 将grid-template-columns: repeat(auto-fit, auto)改为grid-template-columns: repeat(auto-fit, min-content)，让列宽由内容（图片）的最小宽度决定，避免单元格被不必要地拉伸。
• 给图片添加width: auto和可选的object-fit属性，确保图片在固定高度内保持比例，不会变形。

完整代码示例 #

#gallery {
  background: #cfc;
  padding: 32px;
  display: grid;
  grid-auto-rows: 350px; /* 固定每行高度 */
  grid-template-columns: repeat(auto-fit, min-content); /* 列宽由图片内容决定 */
  grid-gap: 10px;
}

.cell {
  background: #fcc;
}

.cell > img {
  height: 100%;
  width: auto; /* 按图片比例自动计算宽度 */
  object-fit: cover; /* 可选：让图片覆盖单元格，裁剪多余部分；用contain则显示完整图片 */
}

<div id="gallery">
  <div class="cell">
    <img src="http://via.placeholder.com/350x350" alt="示例图片1">
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/500x350" alt="示例图片2">
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/200x350" alt="示例图片3">
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/400x350" alt="示例图片4">
  </div>
</div>

效果说明 #

这样设置后，每个单元格的宽度会匹配对应图片在350px高度下的比例宽度，同时Grid的auto-fit特性会自动换行，在容器宽度不足时将图片移到下一行，完美实现固定高度、可变宽度的画廊布局。

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