css - 当使用 CSS Grid auto-fit 时，我可以让网格单元扩展以适应它们的内容吗？

Question

当做类似 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 我希望我的内容不会溢出网格单元格，如果它是太大或太长。这是一个例子 codepen我创建的说明了这个问题。我在第三个网格项中添加了一些没有换行符的长文本。如您所见，文本超出了边缘。我希望扩展第三个网格元素以适合文本。如果整个第 3 列也必须展开，我没意见，我只是希望它适合文本。

这是一个稍微修改过的例子 codepen#2只有 2 个网格元素和同样的问题。当这两个元素仍然在同一行时，我希望它的行为就像我声明了 grid-template-columns: 1fr 1fr; 但是当第二个元素仍然换到第二行时足够小。

有没有办法做到这一点？

Answer 1

请检查下面的 CSS 代码:

.container {
  display: block;
}

.item {
  background: #ffc600;
  display: grid;
  min-width: 100px;
  min-height: 100px;
  margin: 5px;
  float: left;
  justify-items: center;
  align-content: center;
}