如何在CSS Grid Layout中实现横向滚动的图片画廊（图片向右排列）

刚好我之前做过类似的需求，其实用CSS Grid来实现这个横向滚动的图片画廊超简单，核心就几个关键属性，我一步步给你讲：

首先咱们先搭HTML结构，很直观——一个容器包裹所有的图片项就行：

<div class="image-gallery">
  <div class="gallery-item">
    <img src="你的图片地址1" alt="图片描述1">
  </div>
  <div class="gallery-item">
    <img src="你的图片地址2" alt="图片描述2">
  </div>
  <div class="gallery-item">
    <img src="你的图片地址3" alt="图片描述3">
  </div>
  <!-- 可以继续添加更多图片项 -->
</div>

接下来是关键的CSS部分，重点就是让Grid横向排列，并且超出视口时显示滚动条：

/* 画廊容器核心样式 */
.image-gallery {
  display: grid;
  /* 让Grid项目沿水平方向排列，替代默认的垂直排列 */
  grid-auto-flow: column;
  /* 设置每个图片项的宽度，可根据需求调整数值 */
  grid-auto-columns: 250px;
  /* 开启横向滚动，超出视口的部分自动出现滚动条 */
  overflow-x: auto;
  /* 给图片之间加间距，提升视觉舒适度 */
  gap: 1rem;
  /* 清除默认内外边距，可根据整体布局调整 */
  margin: 0;
  padding: 1rem;
  /* 隐藏垂直方向的滚动条（避免不必要的滚动） */
  overflow-y: hidden;
}

/* 图片项固定高度，避免图片拉伸变形 */
.gallery-item {
  height: 200px;
}

/* 让图片自适应容器，保持比例不变形 */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px; /* 可选：给图片加圆角，提升美观度 */
}

/* 可选：自定义滚动条样式，让它更贴合设计 */
.image-gallery::-webkit-scrollbar {
  height: 8px;
}

.image-gallery::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.image-gallery::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.image-gallery::-webkit-scrollbar-thumb:hover {
  background: #555;
}

我来给你拆解一下核心属性：

• grid-auto-flow: column：这是让图片横向排列的关键，默认Grid是按行垂直向下排列，这个属性直接把排列方向改成了水平向右。
• grid-auto-columns: 250px：控制每个图片项的宽度，你可以改成300px这类固定值，也可以用minmax(200px, 250px)实现基础的自适应宽度。
• overflow-x: auto：当图片总宽度超过容器（视口）宽度时，自动触发横向滚动，配合overflow-y: hidden把垂直滚动条隐藏，避免干扰。
• object-fit: cover：保证图片在容器内按比例填充，不会被拉伸变形，这对图片展示的美观性很重要。

如果想要适配移动端，只需要加个媒体查询调整图片项宽度就行：

@media (max-width: 768px) {
  .image-gallery {
    grid-auto-columns: 200px;
  }
}

这样就能完美实现你想要的效果啦～

内容的提问来源于stack exchange，提问作者Олександр Семенюк