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.