CSS Grid实现列表换行并自适应内容宽度的问题

要实现元素贴合自身内容宽度且自动换行的效果，你可以放弃Grid布局，改用Flex布局来实现，这更适配你的场景。

修改后的代码如下：

<style>
.container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.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>

关键说明： #

• display: flex：启用Flex布局，让子元素可以灵活排列
• flex-wrap: wrap：当容器宽度不足以容纳所有元素时，自动换行
• white-space: nowrap：确保每个元素内的文本不换行，维持自身内容宽度
• gap: 10px：保持元素之间的间距，避免拥挤

内容的提问来源于stack exchange，提问作者mr.incredible