html - 如果空间大于最小网格间隙，则 Css Grid 最大化元素之间的空间

Question

我有一个 CSS 网格。我希望网格中的元素具有 35 像素的最小网格间隙。我希望元素的最大宽度为 286 像素。如果元素之间的空间大于 35 像素，我希望元素之间的空间是最大的。我在下面创建了一张图片来说明我想要什么。

绿色显示网格。蓝色表示框之间的最小间隙，在间隙低于此网格后，框应换行或开始缩小。

目前我得到的结果在顶部，但我希望结果在底部。我希望将元素推到网格的两侧。目前最右边的元素和网格之间有额外的空间。

这是我正在使用的代码，它目前会产生这些结果

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

标签： htmlcsscss-grid

Answer 1

要最大化内容之间的空间，请使用justify-content：

.container {
  justify-content: space-between;
}