Reka letak grid CSS, menambah baris secara automatik dan menetapkan lebar lajur kepada lebar item grid maksimum

Question

Saya mahukan reka letak grid dengan sebarang bilangan item grid dan apabila item grid diisi, ia akan mencipta baris baharu secara automatik, seperti:

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

Masalahnya saya tak nak hardcode 75px. Adakah terdapat cara untuk menetapkan nilai ini kepada "lebar kandungan item grid terluas"?

Saya cuba menukar 75px 更改为 min-content，这似乎可以按照规范工作，但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns kepada kandungan min dan itu nampaknya berfungsi mengikut spesifikasi, tetapi alat pembangun mengatakan ia CSS tidak sah. Saya juga telah mencuba hanya menetapkan grid-auto-columns: min-content dan bukannya grid-template-columns, yang nampaknya menetapkan lebar dengan betul, tetapi tidak untuk setiap item grid Mengambil seluruh baris.

Answer 1

Jawapan ringkasnya ialah tidak. Tetapi ini soalan yang bagus, dan saya fikir ia adalah kes penggunaan biasa yang benar-benar harus disokong.

Anda akan berada dalam Lajur Templat Grid. Bahagian auto-ulang yang berkaitan ialah

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

di mana saiz tetap adalah

 = 
                                     |
  minmax(  ,  )       |
  minmax(  ,  )

Bit lain ialah

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

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

 = 
        |
  

Ini bermakna apabila menggunakan minmax() dalam grid-template-columns untuk menjana lajur secara automatik, grid-template-columns中使用minmax()自动生成列时，您的最小值或最大值需要为固定长度或百分比。您可以使用 max-contentnilai minimum atau maksimum anda

perlu ditetapkan panjang atau peratusan . Anda boleh menggunakan maks-kandungan sebagai nilai pertama dalam ungkapan minmax, tetapi hanya jika anda kemudian menggunakan panjang tetap atau peratusan sebagai nilai kedua dalam ungkapan. Sangat menjengkelkan, bukan? Saya harap saya faham mengapa had ini wujud.

Bolehkah kita membetulkannya? Adakah contoh ini lebih dekat dengan apa yang anda mahukan?

🎜

#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