如何使网格中的列像 Flexbox 一样“空间均匀”？

Question

我有这个网格 CSS

.grid {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}

它位于宽度为 500px 的 div 中

但我注意到网格中的第一个项目“拥抱”了 div 的左边缘，但最右边的项目没有接触 div 的边缘。

在 Flexbox 中，我可以通过（接近足够）实现这一点：

.flex {
    display: flex;
    justify-content: space-between;
 }

如何使用网格响应式地执行此操作？

我知道我可以更改网格列间隙，但这看起来很不稳定

Answer 1

使用auto而不是1fr和 Flexbox 一样justify-content工作：

.grid {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: repeat(3, auto);
  justify-content:space-between;
}

<div class="grid">
  <div>aaa</div>
  <div>bbb</div>
  <div>ccc</div>
</div>