我想要一個具有任意數量的網格項目的網格佈局，當一個網格項目被填充時，它會自動創建一個新行，有點像：

#grid {
  display: grid;
  width: 256px;
  border: 1px solid black;
  grid-gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
}

#grid span {
  background-color: lightgray;
}

<div id=grid>
  <span>content 1</span>
  <span>content 2</span>
  <span>content 3</span>
  <span>content 4</span>
  <span>content 5</span>
  <span>content 6</span>
  <span>content 7</span>
  <span>content 8</span>
  <span>content 9</span>
  <span>content 10</span>
</div>

問題是我不想對 75px 進行硬編碼。 有沒有辦法將該值設定為「最寬網格項的內容寬度」？

我嘗試將 75px 更改為 min-content，這似乎可以按照規範工作，但開發工具說這是無效的 CSS。我還嘗試過只設定grid-auto-columns: min-content 而不是grid-template-columns，這似乎正確設定了寬度，但每個網格項佔用了一整行。