如何像 flexbox 一样在网格 "space-evenly" 中制作列？

Question

我有这个网格CSS

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

它位于 div 中，宽度为：500px

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

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

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

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

我知道我可以更改网格列间距，但这看起来很古怪

Answer 1

使用 auto 而不是 1fr 并且相同的 justify-content 将像使用 flexbox 一样工作：

.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>

Answer 2

考虑使用 auto-fit 关键字通过展开列以将列放入可用行 space。

.grid-container {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item {
  background-color: blue;
  padding: 30px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

如何像 flexbox 一样在网格 "space-evenly" 中制作列？

How do make columns in a grid "space-evenly" like with flexbox?

javascript

css

css-grid

grid-layout