是否可以在同一行上使css网格溢出[重复]答案

【问题标题】：Is it possible to make css grid overflow on same row [duplicate]是否可以在同一行上使css网格溢出[重复]
【发布时间】：2020-11-26 18:55:24
【问题描述】：

我正在尝试使包含 4 个图像的 div 均匀地显示每个图像，以便显示 3 个间隙为 20 像素的图像。这个 div 应该是可滚动的，因此最终的图像可以滚动到，但是我似乎无法让它通过 css 网格溢出。

Closest I've got it is this, however there is no overflow-x containing the final image

为了实现这一点，我为我的网格编写了以下代码。我知道设置为 100% 的 grid-template-rows 会导致问题，但我不确定是否有替代方法：

    .container {
    width: 100%;
    height: 100%;
    }
    
    .images {
      height: 200px;
      width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    gap: 20px;
    overflow-x: scroll;
    }

    .images img {
      object-fit: cover;
      object-position: center;

      width: 100%;
      height: 100%;
    }

    <div class="container">
    <div class="images">
        <img
        src={image}
      />

        <img
        src={image}
      />

        <img
        src={image}
      />

        <img
        src={image}
      />
      </div>
      </div>

或者，我尝试过使用 flexbox，每个图像的宽度为 33.3%，但是让它在 20px 的间隙上工作似乎太“hacky”了。

谢谢

【问题讨论】：

标签： css

【解决方案1】：

这是你想要做的吗？：

.images {
  box-sizing: border-box;
  margin: 3vw;
  display: flex;
  overflow: auto;
  gap: 2vw;
}

img {
  width: calc(33.33% - 1vw);/* minus half of the gap size */
  flex-shrink: 0;
}

<div class="container">
  <div class="images">
    <img src=https://picsum.photos/id/1010/400/300 />
    <img src=https://picsum.photos/id/1011/400/300 />
    <img src=https://picsum.photos/id/1012/400/300 />
    <img src=https://picsum.photos/id/1013/400/300 />
  </div>
</div>

【讨论】：