CSS 網格佈局，自動新增行並將列寬度設定為最大網格項目寬度

Question

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

#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，這似乎正確設定了寬度，但每個網格項佔用了一整行。

Answer 1

簡短的回答是否定的。但這是一個很好的問題，我認為這是一個真正應該得到支援的常見用例。

您將在 網格模板列。 自動重複的相關部分是

 = 
  repeat( [ auto-fill | auto-fit ] , [ ?  ]+ ? )

其中固定大小是

 = 
                                     |
  minmax(  ,  )       |
  minmax(  ,  )

其他位元是

 = 
    |
                 |
  min-content          |
  max-content          |
  auto                 

 = 
    |
  min-content          |
  max-content          |
  auto                 
    
 = 
    

 = 
        |
  

這表示當在grid-template-columns中使用minmax()自動產生列時，您的最小值或最大值需要為固定長度或百分比。您可以使用 max-content 作為 minmax 表達式中的第一個值，但前提是您隨後使用固定長度或百分比作為表達式中的第二個值。很煩人，不是嗎？我希望我了解此限制存在的原因。

我們可以解決這個問題嗎？這個例子比較接近您想要的嗎？

#grid {
  display: grid;
  width: 550px;
  border: 1px solid black;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(max-content,18%));
  overflow: hidden;
}

#grid span {
  background-color: lightgray;
}

  content 1
  content 22
  content 333
  content 4444
  content 55555
  content 666666
  content 7777777
  content 88888888
  content 999999999