如何用CSS Grid创建自适应等比例图片画廊？

当然可行！你要的列宽自适应容器、同时图片完全保持原始比例的Grid画廊，其实只需要调整图片的适配规则就行，完全不用固定容器尺寸加overflow: hidden。下面结合你的代码给你具体实现方案：

核心思路 #

1. 用grid-template-columns: repeat(N, 1fr)让列自动平分容器宽度（自动扣除gap的空间），实现“列宽占满容器”的效果；
2. 给图片设置自适应规则，强制按原始比例缩放，避免拉伸变形；
3. 可选：如果需要统一画廊的视觉高度，可以用object-fit或aspect-ratio控制图片填充方式。

修改后的完整代码 #

HTML结构（假设你的结构是这样） #

<div class="container">
  <div class="grid">
    <img src="你的图片地址" alt="图片描述">
    <img src="你的图片地址" alt="图片描述">
    <!-- 更多图片 -->
  </div>
</div>

CSS样式 #

.container {
  width: 90vw;
  margin: 0 auto;
}

/* 默认移动端3列布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* 图片核心适配规则 */
.grid img {
  width: 100%;
  height: auto;
  /* 可选：根据需求二选一 */
  /* 1. 完整显示图片，网格项高度随图片自动变化（无裁剪） */
  /* object-fit: contain; */
  /* 2. 填充网格项，保持比例裁剪超出部分（统一视觉高度） */
  /* object-fit: cover; */
}

/* 大屏幕适配：调整列数 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

关键细节解释 #

• repeat(3, 1fr)：让3列自动分配容器的可用宽度，每列宽度会根据容器尺寸动态调整，完美实现“列宽占100%容器”的需求；
• width: 100%; height: auto;：这是保持图片比例的核心——强制图片宽度填满所在网格列，高度按原始比例自动计算，彻底杜绝拉伸变形；
• object-fit的选择：
  • 选contain：图片会完整显示，网格项高度会随图片比例变化，适合需要展示完整图片的场景；
  • 选cover：图片会填充整个网格项，超出部分被裁剪，适合追求画廊统一高度的视觉效果；
• 如果想要固定所有图片的显示比例（比如统一正方形），可以再加一行aspect-ratio: 1/1;（替换成你需要的比例，比如16/9），配合object-fit: cover使用即可。

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