Disposition de la grille CSS, ajoutant automatiquement des lignes et définissant la largeur des colonnes sur la largeur maximale des éléments de la grille

Question

Je veux une disposition en grille avec n'importe quel nombre d'éléments de grille, et lorsqu'un élément de grille est rempli, il crée automatiquement une nouvelle ligne, un peu comme :

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

Le problème est que je ne veux pas coder en dur 75px. Existe-t-il un moyen de définir cette valeur sur la « largeur du contenu de l'élément de grille le plus large » ?

J'ai essayé de changer 75px 更改为 min-content，这似乎可以按照规范工作，但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns en min-content et cela a semblé fonctionner selon les spécifications, mais les outils de développement ont indiqué qu'il s'agissait d'un CSS invalide. J'ai également essayé de définir simplement grid-auto-columns: min-content au lieu de grid-template-columns, ce qui semble définir correctement la largeur, mais pas pour chacun. élément de grille Occupe une ligne entière.

Answer 1

La réponse courte est non. Mais c'est une excellente question, et je pense que c'est un cas d'utilisation courant qui devrait vraiment être pris en charge.

Vous serez dans la Colonne des modèles de grille. La partie pertinente de auto-repeat est

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

où se trouve taille fixe

 = 
                                     |
  minmax(  ,  )       |
  minmax(  ,  )

D'autres bits sont

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

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

 = 
        |
  

Cela signifie que lorsque vous utilisez minmax() dans grid-template-columns pour générer automatiquement des colonnes,

vos valeurs minimales ou maximales grid-template-columns中使用minmax()自动生成列时，您的最小值或最大值需要为固定长度或百分比。您可以使用 max-contentdoivent être d'une longueur ou d'un pourcentage fixe . Vous pouvez utiliser max-content comme première valeur dans une expression minmax, mais uniquement si vous utilisez ensuite une longueur fixe ou un pourcentage comme deuxième valeur dans l'expression. Très ennuyeux, n'est-ce pas ? J'aurais aimé comprendre pourquoi cette limitation existe.

Pouvons-nous résoudre ce problème ? Cet exemple est-il plus proche de ce que vous souhaitez ?

#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