Css 如果空間大於最小網格間隙，則網格最大化元素之間的空間

Question

我有一個 css 網格。 我希望網格中的元素具有 35 像素的最小網格間隙。 我希望元素的最大寬度為 286 像素。 如果元素之間的空間大於 35 像素，我希望元素之間的空間是最大的。 我在下面創建了一張圖片來說明我想要什么。

綠色顯示網格。 藍色表示框之間的最小間隙，在間隙低於此網格后，框應 go 換行或開始縮小。

目前我得到的結果在頂部，但我希望結果在底部。 我希望將元素推到網格的兩側。 目前最右邊的元素和網格之間有額外的空間。

這是我正在使用的代碼，它目前會產生這些結果

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

Answer 1

要最大化內容之間的空間，請使用justify-content ：

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