CSS-Rasterlayout, automatisches Hinzufügen von Zeilen und Festlegen der Spaltenbreite auf die maximale Breite des Rasterelements

Question

Ich möchte ein Rasterlayout mit einer beliebigen Anzahl von Rasterelementen. Wenn ein Rasterelement gefüllt ist, wird automatisch eine neue Zeile erstellt, etwa so:

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

Das Problem ist, dass ich nicht fest codieren möchte 75px. Gibt es eine Möglichkeit, diesen Wert auf die „Inhaltsbreite des breitesten Rasterelements“ festzulegen?

Ich habe versucht, 75px 更改为 min-content，这似乎可以按照规范工作，但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns in min-content zu ändern, und das schien laut Spezifikation zu funktionieren, aber die Entwicklungstools sagten, es sei ungültiges CSS. Ich habe auch versucht, einfach grid-auto-columns: min-content anstelle von grid-template-columns festzulegen, wodurch die Breite anscheinend richtig eingestellt wird, aber nicht für jeden Rasterelement Nimmt eine ganze Zeile ein.

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