如何基于计算出的Grid列宽设置CSS Grid元素的最大宽度？

你的需求完全可以实现，核心是让Grid的宽度由现有单元格的内容决定，而非底部跨列元素的长文本。只需调整Grid的列模板设置，同时确保跨列元素的宽度被Grid容器限制：

修改后的CSS代码 #

.theGrid {
  display: inline-grid;
  /* 用max-content让列宽由单元格内容决定，minmax(0, ...)避免内容溢出时列宽无限扩展 */
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
}

.normalCell {
  background-color: green;
  padding: 5px;
}

.stretchCell {
  background-color: yellow;
  grid-column: 1 / span 2;
  /* 确保文本超出时自动换行 */
  word-wrap: break-word;
}

对应HTML（无需修改） #

<div class="theGrid">
  <div class="normalCell">Test label</div>
  <div class="normalCell">Test content</div>
  <div class="normalCell">Test label 2</div>
  <div class="normalCell">Test very very very very very long long long long long content 2</div>
  <div class="stretchCell">This must wrap when the text gets longer than the green cells above</div>
</div>

原理说明 #

• grid-template-columns: repeat(2, minmax(0, max-content))：让每一列的宽度由该列中最宽的单元格内容决定，minmax(0, ...)确保即使单元格内有长文本，也不会无限撑开列宽（配合单元格的默认换行行为）。这样Grid的总宽度完全由前两行的绿色单元格内容计算得出。
• grid-column: 1 / span 2：让黄色单元格横跨两列，其宽度等于Grid的总宽度。
• word-wrap: break-word：确保黄色单元格内的长文本超出宽度时自动换行，不会撑大Grid容器。

这样设置后，黄色单元格的内容会自动换行，Grid的宽度始终由前面绿色单元格的内容决定，无需指定任何固定最大宽度。

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