如何让所有元素双向收缩至最大元素的内容尺寸？

嘿，这个需求我太熟了！之前帮朋友解决过几乎一模一样的问题，CSS Grid就是你要找的完美工具——毕竟它是专门处理二维布局的，刚好弥补了Flex在这方面的短板。

先给你说清楚核心思路：你要的是所有item宽度和最宽的内容保持一致，同时自适应容器宽度自动换行，Flex作为一维布局确实搞不定，但Grid的二维特性刚好能完美解决这个问题。

完整代码示例 #

先上可直接用的代码，一看就懂：

HTML结构（动态生成的item都放这里）

<div class="item-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2 (短内容)</div>
  <div class="item">Item 3 - 这个内容稍微长一点</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5 - 我是最宽的那个内容哦</div>
  <!-- 这里可以加N个动态生成的item -->
</div>

CSS核心代码

.item-container {
  display: grid;
  /* 关键属性：自动创建尽可能多的列，每列宽度等于所有item中最宽的内容宽度 */
  grid-template-columns: repeat(auto-fill, max-content);
  /* 可选：item之间的间距，根据你的需求调整数值 */
  gap: 1rem;
  /* 可选：让每行item左对齐，避免列被强制拉伸撑满容器 */
  justify-content: start;
}

.item {
  /* 可选：给item加些基础样式，方便看效果 */
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

为什么这个方案能解决你的问题？ #

• repeat(auto-fill, max-content)：auto-fill会根据容器宽度自动计算能容纳多少列；max-content会自动取所有item中内容最宽的那个值作为每列的宽度。不管你有10个还是100个item，不管容器宽到能放10列还是窄到只能放2列，每一列的宽度都会和最宽的item内容保持一致，所有item自然就统一宽度了。
• justify-content: start：默认Grid会把列拉伸撑满容器，加这个属性可以让列保持原本的max-content宽度，不会被强行变宽，完美贴合你要的“宽度和内容最宽的item一致”的需求。

额外小技巧 #

如果你希望每行的item在容器中均匀分布（比如最后一行不要左对齐），可以把justify-content改成space-between或者space-around，这样item之间的间距会自动调整，但item本身的宽度还是会保持和最宽的那个一致，非常灵活。

内容的提问来源于stack exchange，提问作者DreamTeK