mr.boris's questions

我想包装我的列表，同时使其适合如下内容：

问题是每个元素必须适合其内容的宽度。

我已经找到了如何包装固定大小的项目的 示例，但它对我的情况没有帮助：grid-template-columns: repeat( 12, minmax(250px, 1fr) );

我尝试了几种组合，但没有成功，列表要么固定在一行，要么元素相互重叠。我也找不到这个案例的任何好的例子。

<style>
.container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat( auto-fit, minmax(min-content, 30px) );
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
</style>
<div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

这就是我现在得到的：