CSS 网格布局，自动添加行并将列宽度设置为最大网格项目宽度

Question

我想要一个具有任意数量的网格项的网格布局，当一个网格项被填充时，它会自动创建一个新行，有点像：

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

问题是我不想对 75px 进行硬编码。 有没有办法将该值设置为“最宽网格项的内容宽度”？

我尝试将 75px 更改为 min-content，这似乎可以按照规范工作，但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns，这似乎正确设置了宽度，但每个网格项占用了一整行。

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