如何用CSS Grid实现基于内容的动态等宽列（无需JS）

要实现等宽列、列宽由所有子元素最大max-content决定、自动换行的动态容器，目前纯CSS无法完全实现repeat(auto-fill, <所有子元素max-content最大值>)的理想效果，但可以通过以下方案接近需求：

接近需求的纯CSS实现 #

使用Grid布局，结合minmax(0, 1fr)和子元素的最小宽度限制：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 1rem; /* 可选，设置列间距 */
}

.item {
  min-width: max-content; /* 保证元素不小于自身内容宽度，内容不换行 */
  white-space: nowrap; /* 强制内容不换行 */
  width: 100%; /* 让元素拉伸填满列宽 */
  border: 1px solid #ccc; /* 示例样式 */
  padding: 0.5rem;
}

效果说明 #

• Grid会自动计算可容纳的最大列数，确保每列宽度至少等于所有子元素中最大的max-content值（因为子元素的min-width: max-content会限制列宽不能小于该值）。
• 所有列保持等宽，较小的子元素会拉伸填满列宽，内容不会换行或溢出。
• 容器宽度变化时，列数自动调整，多余子元素自动换行。

为什么无法完全实现“列宽严格等于最大max-content” #

目前CSS Grid的repeat(auto-fill, <size>)不支持直接使用基于所有子元素的内在尺寸（比如所有子元素的max-content最大值）作为列宽。当minmax()中包含内在尺寸时，auto-fill会优先使用minmax的最小值作为列宽基准，这也是你遇到minmax(20px, max-content)只生成20px列的原因。

如果严格要求列宽必须等于所有子元素的max-content最大值，目前纯CSS没有原生方案，只能通过JavaScript（比如MutationObserver监听子元素变化，计算最大宽度后动态设置grid-template-columns）实现。

为什么Flexbox不可行 #

正如你所说，Flexbox的flex-grow/flex-shrink无法跨行保持相同的尺寸比例，第二行及以后的子元素宽度可能和第一行不一致，无法满足全局等宽列的需求。

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