如何让CSS Grid列宽相等且匹配子元素最大max-content？

需要利用CSS Grid实现以下布局效果：

• 每列宽度完全相等
• 列宽由所有子元素中的最大max-content宽度决定

尝试了以下代码但未达到预期效果：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}

对应的完整示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));
}

<div class="container">
  <div class="children"> Very long text </div>
  <div class="children"> long text </div>
  <div class="children"> text</div>
  <div class="children"> text</div>
  <div class="children"> text</div>
  <div class="children"> text</div>
</div>

预期布局效果：

• 当容器仅能容纳2列时：

Very long text | long text     |
text           | text          |
text.          | text          | 

• 当容器可容纳3列时：

Very long text | long text     | text         |
text           | text          | text         | 

两种场景下，所有列的宽度均由内容最长的Very long text元素的max-content决定。

原因分析 #

你之前的代码无效，是因为minmax(max-content, 1fr)中，当容器宽度充足时，1fr会强制列拉伸以填满容器空间，导致列宽偏离max-content的预期值。

实现方式（JS + CSS，最准确） #

通过JavaScript获取所有子元素中的最大max-content宽度，将其赋值给CSS变量，再结合Grid布局实现需求：

1. CSS代码：

.container {
  display: grid;
  /* 自动填充列，列宽固定为最大子元素宽度 */
  grid-template-columns: repeat(auto-fill, minmax(var(--max-item-width), 1fr));
  gap: 8px; /* 可选，添加列间距优化视觉 */
}

.children {
  white-space: nowrap; /* 确保内容不换行，准确计算max-content */
}

2. JavaScript代码：

const container = document.querySelector('.container');
const childElements = container.querySelectorAll('.children');

let maxWidth = 0;
childElements.forEach(child => {
  // 获取元素的max-content宽度
  const contentWidth = child.scrollWidth;
  if (contentWidth > maxWidth) {
    maxWidth = contentWidth;
  }
});

// 将最大宽度赋值给CSS变量
container.style.setProperty('--max-item-width', `${maxWidth}px`);

纯CSS替代方案（有局限） #

如果不想使用JS，可通过强制子元素不换行，并利用grid-template-columns: repeat(auto-fill, max-content)实现近似效果，但这种方式下，列宽会取每个子元素自身的max-content，而非全局最大值，仅当所有子元素都设置white-space: nowrap时，视觉上会更接近预期：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, max-content);
  gap: 8px;
}

.children {
  white-space: nowrap;
}

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