CSS-Rasterlayout, automatisches Hinzufügen von Zeilen und Festlegen der Spaltenbreite auf die maximale Breite des Rasterelements
P粉818317410
P粉818317410 2024-03-28 11:13:36
0
1
400

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.

P粉818317410
P粉818317410

Antworte allen(1)
P粉787820396

简短的回答是否定的。但这是一个很好的问题,我认为这是一个真正应该得到支持的常见用例。

您将在 网格模板列自动重复的相关部分是

 = 
  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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!